I am making a simple website with a bunch of divs in a container. When you click on a div it changes a color. When div is pressed 8 times it goes back to a starting color wich is "LightSlateGray". The problem is if someone clicks on another div after clicking on the first one the variable that i used to count the clicks doesnt start from 0.
For example:
First div is clicked and its color changed to red.When the other div is clicked its background color changes to green but I want it to turn red and as user keeps pressing the second div it should turn green the blue then orange etc.
var order = 0;
function changeColour(item)
{
order++;
if(order == 1)
{
item.style.backgroundColor = 'red';
}
else if(order == 2)
{
item.style.backgroundColor = 'Green';
}
else if(order== 3)
{
item.style.backgroundColor = 'Blue';
}
else if(order == 4)
{
item.style.backgroundColor = 'Orange';
}
else if(order == 5)
{
item.style.backgroundColor = 'Yellow';
}
else if(order == 6)
{
item.style.backgroundColor = 'Purple';
}
else if(order == 7)
{
item.style.backgroundColor = 'Black';
}
if(order == 8)
{
item.style.backgroundColor = 'LightSlateGray'
order = 0
}
}
I tried to put var order = 0 in the funcion itself but that was just dumb beacuse it made other part of code useless
Is there any way of accomplishing that without creating a ton of variables?
>Solution :
You can either create those variables by using a loop:
const colors = [
'Red', 'Green', 'Blue', 'Orange',
'Yellow', 'Purple', 'Black', 'LightSlateGray'
];
document.querySelectorAll('div div').forEach(div => {
// New 'order' forEach element.
let order = 0;
div.addEventListener('click', function() {
this.style.backgroundColor = colors[order];
order = (order + 1) % colors.length;
});
});
Try it:
const colors = [
'Red', 'Green', 'Blue', 'Orange',
'Yellow', 'Purple', 'Black', 'LightSlateGray'
];
document.querySelectorAll('div div').forEach(div => {
let order = 0;
div.addEventListener('click', function() {
this.style.backgroundColor = colors[order];
order = (order + 1) % colors.length;
});
});
#container {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
gap: 2em;
}
div div {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
aspect-ratio: 1 / 1;
padding: 3em;
user-select: none;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
…or use Array#indexOf()
to have JS do that for you (note that I wrote the color names in lowercase) :
const colors = [
'red', 'green', 'blue', 'orange',
'yellow', 'purple', 'black', 'lightslategray'
];
document.querySelectorAll('div div').forEach(div => {
div.addEventListener('click', function() {
let order = colors.indexOf(this.style.backgroundColor);
order = (order + 1) % colors.length;
this.style.backgroundColor = colors[order];
});
});
Try it:
const colors = [
'red', 'green', 'blue', 'orange',
'yellow', 'purple', 'black', 'lightslategray'
];
document.querySelectorAll('div div').forEach(div => {
div.addEventListener('click', function() {
let order = colors.indexOf(this.style.backgroundColor);
order = (order + 1) % colors.length;
this.style.backgroundColor = colors[order];
});
});
#container {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
gap: 2em;
}
div div {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
aspect-ratio: 1 / 1;
padding: 3em;
user-select: none;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>