Change flickity style: use JS for style modification

Question

I'm running into a Flickity issue with accessing styles using js, specifically, styles for indicator points. I want the points to be colored based on the colors in an array (in my project this should be a dynamic array, but is currently static to simplify the test case). My function works on elements with the same class name as the indicator points I put in the html below the Flickity carousel.

This is a forked (from the Flickity documentation) and changed CodePen to illustrate my problem:
https://codepen.io/Insa-Deist/pen/jOXNOKM

Thanks in advance for any tips.

The js I added should be correct, I have tried it on another line of points that are not in the Flickity carousel container and have the same class name that the js is speaking of (when I open the source code of my project , the cue point also has the same class name).

*Just got a warning asking me to paste the code here too, so I’m pasting it here:

html

<h1>Flickity - freeScroll, wrapAround</h1>

<!-- Flickity HTML init -->
<div class="carousel"
  data-flickity='{ "freeScroll": true, "wrapAround": true }'>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

<br><br><br>

<p> row of dots to show the js function with the color array --> ISSUE: i want the indicator dots from the carousel also be colored from that array, why is i not working even though they also have the .dot class assigned when I open the sourcecode of my project</p>
<div class"flickity-page-dots">
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</div>

css

/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #FAFAFA;
}

.carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
}
.flickity-page-dots .dot{
  opacity: 1;
}
.flickity-page-dots .dot.is-selected {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);}

js

// external js: flickity.pkgd.js
var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
var customizeContainer = Array.from(document.querySelectorAll('.dot'));

customizeContainer.forEach(function(node, i) {
    node.style.background = colors[i % colors.length];
});

Answer 1

Try it on codepen:

// 外部js: flickity.pkgd.js
    function changeColor(){
    var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
    var customizeContainer = Array.from(document.querySelectorAll('.dot'));
    
    customizeContainer.forEach(function(node, i) {
        node.style.background = colors[i % colors.length];
        console.log(colors[i % colors.length]);
    });
    }
    var flkty = new Flickity( '.carousel', {
      on: {
        ready: function() {
         changeColor();
        }
      }
    });