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

【问题标题】：Change background color using event handler使用事件处理程序更改背景颜色
【发布时间】：2016-11-10 21:17:03
【问题描述】：

我正在尝试创建一个简单的表单，其中三个 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;
}

【问题讨论】：

标签： javascript html events eventhandler

【解决方案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>

【讨论】：

天哪，太有帮助了，我真的很感激！有时我想得太远，最终让自己感到困惑。
不用担心，您可以为每个 div 使用单独的函数，例如 changeToGreen 等，虽然这更具可扩展性
您也可以使用 forEach 和 querySelectorAll，这只是我的偏好： var boxes = document.querySelectorAll('.listener'); box.forEach(function(box){ box.addEventListener('click', changeColor); }) function changeColor(e) { this.style.backgroundColor = this.getAttribute('color'); }
我看到了那个答案，正准备在你删除之前发表评论。当您知道您正在搜索课程时，没有理由使用querySelectorAll。您可以使用foreach 来遍历数组，但一些较旧的浏览器不喜欢这样。看着你IE8。另外，请不要向 cmets 添加那么多代码。由于未格式化，因此难以阅读。如果您认为这是一个可行的答案，请照此提交。
@Charlie_Nex 如果这对您有帮助，请不要忘记标记为答案。

【解决方案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>

【讨论】：

或e.srcElement支持IE
关闭但不完全
@CarlMarkham 感谢您的编辑。也就是说，您的 data 属性方法更合适。
我的是一种可能性，你的是另一种。有利于 OP 看到选项

【解决方案3】：

使用事件监听器改变页面的背景颜色

const body = document.querySelector('#body')
const text = document.querySelector('#text')
const red =document.querySelector('#red')
const green =document.querySelector('#green')
const orange= document.querySelector('#orange')

function Red(red){
body.style.backgroundColor = "red";
text.innerHTML = 'color changed to red '
return red;
}

function Green(){
body.style.backgroundColor = "green";
text.innerHTML = 'color changed to green '

} 
function Orange(){
body.style.backgroundColor = "orange";
text.innerHTML = 'color changed to orange '

}

red.addEventListener("click",Red);
green.addEventListener("click",Green);
orange.addEventListener("click",Orange);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body  id="body">
    <!-- Heading -->

<h1> i am heading</h1>

<button id="red">red</button>
<button id="green">green</button>
<button id="orange">orange</button>
<p id="text"></p>
<script src="script.js"></script>
  </body>
</html>

【讨论】：