JS 更改元素的颜色 Onclick 未定义的颜色

【问题标题】：JS Change Element's Color Onclick Undefined colorJS 更改元素的颜色 Onclick 未定义的颜色
【发布时间】：2021-05-25 04:36:34
【问题描述】：

我想制作一个换色器按钮，但在最后一次单击后，颜色将设置为未定义。知道如何删除它吗？

var color = ["Orange", "Red", "Green", "Blue"];
            var i = 0;
            document.querySelector(".changeColorBtn").addEventListener("click", 
                function() {
                i = i < color.length ? ++i : 0;
                $('*[id="changeColor"]').css('color', color[i]);
                $('*[id="changeColorBack"]').css('background', color[i]);
                document.querySelector('.changeColr').innerHTML = color[i];
            })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="changeColr" id="changeColor">COLOR</h1>

<button class="changeColorBtn">Change</button>

【问题讨论】：

标签： javascript html jquery colors

【解决方案1】：

索引从 0 开始计数，而.length 从 1 开始计数。

所以，这一行：

i = i < color.length ? ++i : 0;

需要：

i = i < color.length-1 ? ++i : 0;

因为不从 .length 中减去 1，您会尝试访问比现有索引高 1 的数组索引。

var color = ["Orange", "Red", "Green", "Blue"];
            var i = 0;
            document.querySelector(".changeColorBtn").addEventListener("click", 
                function() {
                i = i < color.length-1 ? ++i : 0;
                $('*[id="changeColor"]').css('color', color[i]);
                $('*[id="changeColorBack"]').css('background', color[i]);
                document.querySelector('.changeColr').innerHTML = color[i];
            })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="changeColr" id="changeColor">COLOR</h1>

<button class="changeColorBtn">Change</button>

【讨论】：