JS更改元素的颜色Onclick未定义颜色 [英] JS Change Element's Color Onclick Undefined color

问题描述

我要创建一个颜色转换器按钮，但是最后一次单击后，颜色将设置为不确定.知道如何删除它吗?

I want to make a color changer button but after the last click, the color will be set undefined. Any idea how to remove it?

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开始计数.

Indexes start counting from 0, while .length starts counting from 1.

因此，这一行:

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

需要为:

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

由于未从 .length 中减去1，因此您尝试访问的数组索引比存在的索引高一个.

Because without subtracting 1 from the .length you attempt to access an array index that is one higher than exists.

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>

这篇关于JS更改元素的颜色Onclick未定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！