Question

嗨我正在尝试使用数组来改变颜色。我想创建一个名为ChangeColor（num）的函数，其中包含一个数字参数，并使用该函数更改框的颜色，因此当单击该按钮时，它会调用该函数并发送正确的数字，以便“框”。 style.backgroundColor = arrName [num];“这是我到目前为止所得到的。

<!DOCTYPE html>
<html>
<head>
<style>
    #box {
        width:200px;
        height:200px;
        background-color:black;
    }
</style>
</head>
<body>
    <div id="group">
        <button id="blue">Blue</button>
        <button id="red">Red</button>
        <button id="green">Green</button>
    </div>

    <div id="box"></div>

    <script type="text/javascript">
        var colors = ["blue","red","green"];
        var blue = document.getElementById("blue");
        var red = document.getElementById("red");
        var green = document.getElementById("green");
        var box = document.getElementById("box");

        var numclicks = 0;

        blue.addEventListener("click", function() {
            if(numclicks == 0) {
                box.style.backgroundColor = colors[0];   
            }
        });

        red.addEventListener("click", function() {
            if(numclicks == 0) {
                box.style.backgroundColor = colors[1];   
            }
        });

        green.addEventListener("click", function() {    
            if(numclicks == 0) {
                box.style.backgroundColor = colors[2];   
            }
        });        
    </script>
</body>
</html>

Answer 1

您只需将事件监听器附加到#group中的按钮，然后将background-color的{{1}}设置为所点击按钮的ID：

＆＃13;

#box

＆＃13;

var box = document.querySelector('#box');

document
  .querySelectorAll('#group button')
  .forEach(function (el) {
    el.addEventListener('click', function () {
      box.style.backgroundColor = el.id;
    });
});

＆＃13;

#box {
  width:200px;
  height:200px;
  background-color:black;
}

＆＃13;

Answer 2

标准功能

const colors = ["blue","red","green"];
const defaultColor = "white"; // if you want for kill errors

function changeColor(num){
    document.querySelector("#box").style.backgroundColor = colors[num]||defaultColor
}

然后你可以将onclick事件添加到这样的按钮

<div id="group">
    <button onclick="changeColor(0)" id="blue">Blue</button>
    <button onclick="changeColor(1)" id="red">Red</button>
    <button onclick="changeColor(0)" id="green">Green</button>
</div>

或类似属性（但保持按钮元素依赖于数组颜色名称的相同顺序）的 HTML

<div id="group"> <button number="0" id="blue">Blue</button> <button number="1" id="red">Red</button> <button number="2" id="green">Green</button> </div>

<强>的javascript

document.querySelectorAll("#group button").forEach((button)=>{ button.addEventListener('click', function () { changeColor(button.getAttr("number")); }); });

Answer 3

其他解决方案使用目前被认为更好的做法。这是一个包含不必要数组的解决方案。

＆＃13;

function changeColor(num) {
    var colors = ['blue', 'red', 'green'];

    document.getElementById('box').style.backgroundColor = colors[num];
}

＆＃13;

#box {
    width: 200px;
    height: 200px;
    background-color: black;
}

＆＃13;

<div id="group">
    <button id="blue" onclick="changeColor(0)">Blue</button>
    <button id="red" onclick="changeColor(1)">Red</button>
    <button id="green" onclick="changeColor(2)">Green</button>
</div>

<div id="box"></div>

＆＃13;

使用数组来改变颜色

3 个答案: