I made tiles of square with HTML,CSS, and Javascript and I’m trying make clickable squares and the color of the square must change to the #e3ff17 simultaneously. If I click that same square, the color must go back to normal.
I’ve tried multiple ways, but none of them worked. I cannot even click on it. How do I make the tiles or squares clickable and change the color, and switch the color back to original when I click it again? Here is my code:”
function changeBackgroundColor(event) {
var color = "#eaef44";
event.style.changeBackgroundColor = color;
}* {
margin: 0;
padding: 0;
}
body {
display: flex;
place-items: center;
justify-content: center;
overflow-x: hidden;
height: 100vh;
}
.container {
display: grid;
place-items: center;
justify-content: center;
}
.div {
display: flex;
justify-content: center;
/*Add this line*/
}
#cont {
display: grid;
grid-template-columns: 1fr;
}
.square {
margin: .5px;
width: 60px;
height: 60px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
list-style: none;
display: grid;
place-items: center;
font-size: 0;
}<div class="square" id="D14" style="background-color: #eee1c6;" onclick="changeColor()"></div>
<div class="square" id="E14" style="background-color: #00a881;"></div>
<div class="square" id="F14" style="background-color: #eee1c6;"></div>
<div class="square" id="G14" style="background-color: #00a881;"></div>
<div class="square" id="H14" style="background-color: #eee1c6;"></div>
<div class="square" id="I14" style="background-color: #00a881;"></div>
<div class="square" id="J14" style="background-color: #eee1c6;"></div>
<div class="square" id="K14" style="background-color: #00a881;"></div>