我想制作一个颜色更改器按钮，但最后一次单击后，颜色将设置为未定义。知道如何删除它吗？
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>
索引从0开始计数，而.length从1开始计数。
所以，这一行：
i = i < color.length ? ++i : 0;
需要是：
i = i < color.length-1 ? ++i : 0;
因为不减 1.length您尝试访问比现有索引大 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
