javascript - CSS每次点击更改形状背景颜色

Question

正如标题所说。我在更改形状背景颜色“onclick”时遇到了一些麻烦。颜色列在数组中，但这并不意味着我只需要数组中的随机值。我想按照数组中列出的正确顺序更改颜色。此外，我需要一个变量来说明当前选择了哪种颜色。

如果有人对此有更好的想法 - 我愿意找出答案。

密码是here

for color in colors {
    function button_click() {

甚至可能是错误的函数调用方式？

Answer 1

据我所知，您想在单击时更改框的颜色，每次单击时都会出现数组中的下一种颜色。

这是一个简单的实现:

var colors = ["red","blue","green","yellow","purple"];
var i = 0;
var selectedColor;
    function button_click() {
        selectedColor = colors[i];
        document.getElementById("box").style.backgroundColor = selectedColor;
        i++;
        if(i > colors.length)
            i = 0;
    }

div#box
{
    width:100px;
    height:100px;
    background-color: white;
    border-color: black;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
}

<div id="box" onclick="button_click();"></div>

i 是一个变量，它会在您每次单击从数组中获取下一个颜色值的框时递增，并且当计数器超过颜色数量时它会重置回 0(第一种颜色)