How do I make my divisions to change color when they are clicked?
Question
I am doing the etch-a-sketch project from the Odin project but I have ran into a trouble. I have created the grid and displayed it on the screen but I can't seem to find a way to make each box change color when they are clicked upon. I have tried all the ways but all of them result in the disappearance of each div's border.
etch-a-sketch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="reset.css" />
</head>
<body>
<div id="input">
<form id="forrm" method="GET">
<label for="size">Custom Size</label>
<input id="size" type="text" name="size">
</form>
</div>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
style.css
#container {
border: gray solid 1px;
height: 500px;
width: 500px;
color: green;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 30px;
display: grid;
grid-template-columns: repeat(16,1fr);
grid-template-rows: repeat(16,1fr);
}
#input {
display: block;
text-align: center;
}
#forrm {
margin-left: auto;
margin-right: auto;
}
script.js
const cont = document.getElementById('container');
for (let a=0; a < 256; a++){
let him = document.createElement('div');
him.classList.add('divi');
him.setAttribute('style','border : solid 1px gray;')
cont.appendChild(him);
}
i have to do this by using js. i have tried selecting all the divisions in the container then iterating through each of them and adding an event like so but it still doesnt work and results in the borders of each div to disappear :
script.js
let gettin = document.querySelectorAll('divi');
gettin.ForEach((divi) , (e ) {
e.target.setAttribute('click' , 'background-color : blue');
});
4 answers
solution1
0 2020-02-24 10:16:24
Have a look at the docs for forEach .
forEach() calls a provided callback function once for each element in an array in ascending order
Callback is invoked with three arguments:
- the value of the element
- the index of the element
- the Array object being traversed
For our example, we are only interested in the first argument: the value of the element .
Inside the callback, we have the current element saved under the label divi . To each divi , we can addEventListener for the click event.
const cont = document.getElementById('container'); for (let a = 0; a < 256; a++) { let him = document.createElement('div'); him.classList.add('divi'); him.setAttribute('style', 'border : solid 1px gray;') cont.appendChild(him); } let gettin = document.querySelectorAll('.divi'); gettin.forEach(divi => { divi.addEventListener('click', e => { e.currentTarget.setAttribute('style', 'background-color : blue;') }); });
#container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16, 1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; }
<div id="input"> <form id="forrm" method="GET"> <label for="size">Custom Size</label> <input id="size" type="text" name="size"> </form> </div> <div id="container"> </div>
solution2
0 2020-02-24 10:27:50
Please refer below code.
const cont = document.getElementById('container'); for (let a = 0; a < 256; a++) { let him = document.createElement('div'); him.classList.add('divi'); him.setAttribute('style', 'border : solid 1px gray;') cont.appendChild(him); } function setBackGroundColor() { this.style.backgroundColor = "blue"; } let gettin = document.getElementsByClassName("divi"); for (var i = 0; i < gettin.length; i++) { gettin[i].addEventListener('click', setBackGroundColor); }
#container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16, 1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; }
<div id="input"> <form id="forrm" method="GET"> <label for="size">Custom Size</label> <input id="size" type="text" name="size"> </form> </div> <div id="container"> </div>
solution3
0 2020-02-24 10:28:31
You need to assign onClick function to each div
const cont = document.getElementById('container'); for (let a = 0; a < 256; a++) { let him = document.createElement('div'); him.classList.add('divi'); him.setAttribute('style', 'border : solid 1px gray;') cont.appendChild(him); } let gettin = document.getElementsByClassName('divi'); for (var i = 0; i < gettin.length; i++){ gettin[i].onclick = changeColor; } function changeColor(e){ e.target.setAttribute('style', 'background-color : blue'); }
#container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16, 1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; }
<div id="input"> <form id="forrm" method="GET"> <label for="size">Custom Size</label> <input id="size" type="text" name="size"> </form> </div> <div id="container"> </div>
solution4
0 2020-02-24 10:38:28
I believe you want to remove color when clicked again.
Add css for blue classname:
.blue{background: blue;}
Use classList.toggle('blue') when clicked on div.
It is better to define new function instead of attaching inline JS on each div:
const cont = document.getElementById('container'); for (let a=0; a < 256; a++){ let him = document.createElement('div'); him.classList.add('divi'); him.setAttribute('style','border : solid 1px gray;') cont.appendChild(him); } let gettin = document.querySelectorAll('.divi'); gettin.forEach((e)=>{ e.addEventListener("click",toblue); }); function toblue(){ this.classList.toggle('blue'); }
#container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16,1fr); grid-template-rows: repeat(16,1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; } .blue{ background: blue; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="reset.css" /> </head> <body> <div id="input"> <form id="forrm" method="GET"> <label for="size">Custom Size</label> <input id="size" type="text" name="size"> </form> </div> <div id="container"></div> <script src="script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.