Question

我正在尝试创建一个简单的表单，其中我有三个div叠加在一起。单击每个框时，需要更改其颜色（一个红色，一个绿色和一个蓝色）。我需要只使用一个事件处理程序。我坚持我的代码，我希望你们中的一个可以指导我完成这个。我真的很感激！这是我的代码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Color Changer</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="squareOne" class="listener"></div>
    <div id="squareTwo" class="listener"></div>
    <div id="squareThree" class="listener"></div>

    <script src="js/main.js"></script>
</body>
</html>

JS：

document.getElementById('squareOne').onclick = changeColor;

function changeColor() {
    document.body.style.color = "red";
    return false;
}

CSS：

#squareOne {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareTwo {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareThree {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

Answer 1

您需要使用addEventListener将事件添加到元素中。这意味着您可以访问引用相关元素的this。

你只指定了颜色，但我认为你的意思是背景颜色，所以我相应调整了风格。

document.getElementById('squareOne').addEventListener('click', changeColor);

function changeColor() {
    this.style.backgroundColor = "red";
    return false;
}

#squareOne {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareTwo {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareThree {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

    <div id="squareOne" class="listener"></div>
    <div id="squareTwo" class="listener"></div>
    <div id="squareThree" class="listener"></div>

如果要使其动态化，可以将颜色作为数据属性添加到元素中，并将事件侦听器添加到每个元素：

var elements = document.getElementsByClassName('listener');
var i;

for (i = 0; i < elements.length; ++i) {
 elements[i].addEventListener('click', changeColor)  
}

function changeColor() {
    this.style.backgroundColor = this.getAttribute('data-color');
}

#squareOne {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareTwo {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareThree {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

    <div id="squareOne" class="listener" data-color="red"></div>
    <div id="squareTwo" class="listener" data-color="green"></div>
    <div id="squareThree" class="listener" data-color="blue"></div>

Answer 2

试试这个：

document.addEventListener('click',  changeColor);

function changeColor(e) {
    colors = {'squareOne': 'red', 'squareTwo': 'blue', 'squareThree': 'green'}
    var target = e.target || e.srcElement;
    target.style.backgroundColor = colors[target.id];
    return false;
}

#squareOne {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareTwo {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareThree {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

<!DOCTYPE html>
<html>
<head>
    <title>Color Changer</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="squareOne" class="listener"></div>
    <div id="squareTwo" class="listener"></div>
    <div id="squareThree" class="listener"></div>

    <script src="js/main.js"></script>
</body>
</html>

使用事件处理程序更改背景颜色

2 个答案: