我在使用js访问样式方面遇到了一个Flickity问题，具体来说，是指示点的样式。我希望这些点能够根据一个数组中的颜色进行着色（在我的项目中，这应该是一个动态数组，但为了简化测试案例，目前是静态的）。我的函数适用于与我在Flickity轮播下方的html中放置的指示点具有相同类名的元素。

这是一个forked（从Flickity文档）和更改的CodePen，以说明我的问题：
https://codepen.io/Insa-Deist/pen/jOXNOKM

提前感谢任何提示。

我添加的js应该是正确的，我已经在不在Flickity轮播容器中的另一行点上尝试过，这些点具有js所讲的相同类名（当我打开我的项目的源代码时，指示点也具有相同的类名）。

*刚刚收到一个警告，要求我也在这里粘贴代码，所以我就粘贴在这里了：

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];
});