Question

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

如果有人有更好的想法 - 我愿意找出来。

代码为here

for color in colors {
    function button_click() {

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

Answer 1

根据我的理解，您希望在点击时更改框的颜色，并且每次单击阵列中的下一个颜色时都会显示。

这是一个简单的实现：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

i是一个变量，每次单击从数组中获取下一个颜色值的框时会递增，当计数器超过颜色数时，它会重置为0（第一种颜色）

Answer 2

请尝试以下示例：

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

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>

Answer 3

我喜欢所有答案，有些非常好，有一两行代码。

这是一个不使用全局var index

的解决方案

这将始终有效，您需要一个循环列表

编辑：白色为默认值，第一种颜色如评论中所述

var colors = ["white","red","blue","green","yellow","purple"];
function button_click() {
    var box = document.getElementById("box");
    var background_color = box.style.backgroundColor;
    var i = colors.indexOf(background_color);
    if (i === colors.length-1) {
        i = -1;
    }
    box.style.backgroundColor = colors[i+1];
}

jsfiddle

Answer 4

你走了：

var colors = ["red","blue","green","yellow","purple"],
    currentColorIndex = 0;

function button_click() {
    document.getElementById("box").style.backgroundColor
        = colors[currentColorIndex];
    currentColorIndex = (currentColorIndex + 1) % colors.length;
}

您似乎有一些编程经验。我建议你拿一本关于javascript的书。即使是一周的阅读并习惯了语法也会让你走得更远。

修改

如果您关心全局命名空间，那么这个：

Square = (function () {
    "use strict";

    var colors = ["white", "red","blue","green","yellow","purple"],
        currentColorIndex = 0,
        squareElement,
        initialize = function ()
        {
            squareElement = document.getElementById("box");
        },
        clickHandler = function () {                
            currentColorIndex = (currentColorIndex + 1) % colors.length;
            squareElement.style.backgroundColor = colors[currentColorIndex];
        };

    return {
        initialize: initialize,
        clickHandler: clickHandler
    };
}());

Square.initialize();

<div id="box" onclick="Square.clickHandler()"></div>

https://jsfiddle.net/uzno1fwy/

CSS每次点击都会更改形状背景颜色

4 个答案:

修改