Change background color using event handler
I'm trying to create a simple form where I have three divs stacked on top of one another. When each box is clicked, their colors need to change (one red, one green, and one blue). I need to do this using only one event handler. I am stuck on my code, I'm hoping one of you can guide me through this. I would really appreciate it! Here is my code:
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
You would need to use addEventListener to add the event to the element. This means you have access to this which refers to the element in question.
You only specified color, but I assumed you meant background color so I have adjusted the style accordingly.
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>If you want to make this dynamic, you could add the color to the element as a data attribute and add the event listener to each element:
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>