When I click on an 'imposter' I want it to become grey with some text as you can see in my CSS with the selector .imposter.voted
. But when I click another imposter I want that one to appear grey and the previous one to appear like usual again.
When I try this.classList.remove("voted")
it does not work and it just makes all the imposters I select grey. The class does not get removed. I don't see where I went wrong.
imposters = document.querySelectorAll(".imposter");
for (let i = 0; i < imposters.length; i ) {
imposters[i].addEventListener("click", function() {
this.classList.add("voted");
});
}
.imposter.voted {
background-color: gray;
position: relative;
opacity: 0.7;
}
.imposter.voted::after {
content: "I voted";
position: absolute;
top: 5px;
right: 5px;
display: inline-block;
font-family: "Comic Sans Ms";
color: red;
}
.imposters__voting {
text-align: right;
}
<main class="dashboard">
<h1>Who Is The Imposter?</h1>
<div class="imposters">
<div class="imposter">Baba</div>
<div class="imposter">Baraki</div>
<div class="imposter">Garfield</div>
<div class="imposter">Erik</div>
<div class="imposter">GreenBlood4</div>
<div class="imposter">Easter</div>
</div>
</main>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Just remove .voted
from all the div.imposter
if present then add .voted
class to the clicked element.
imposters = document.querySelectorAll(".imposter");
for (let i = 0; i < imposters.length; i ) {
imposters[i].addEventListener("click", function() {
var count = 0;
while(count<imposters.length){
imposters[count ].classList.remove('voted');
}
this.classList.add("voted");
});
}
.imposter.voted {
background-color: gray;
position: relative;
opacity: 0.7;
}
.imposter.voted::after {
content: "I voted";
position: absolute;
top: 5px;
right: 5px;
display: inline-block;
font-family: "Comic Sans Ms";
color: red;
}
.imposters__voting {
text-align: right;
}
<main class="dashboard">
<h1>Who Is The Imposter?</h1>
<div class="imposters">
<div class="imposter">Baba</div>
<div class="imposter">Baraki</div>
<div class="imposter">Garfield</div>
<div class="imposter">Erik</div>
<div class="imposter">GreenBlood4</div>
<div class="imposter">Easter</div>
</div>
</main>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
You could remember the index of the currently selected imposter in a variable currentIndex
. Then after clicking you need to go through the rest of the imposters and remove the class voted
.
let imposters = document.querySelectorAll(".imposter");
let currentIndex = null;
for (let i = 0; i < imposters.length; i ) {
imposters[i].addEventListener("click", function() {
this.classList.add("voted");
currentIndex = i;
imposters.forEach(function(imposter, index){
if(index != currentIndex) {
imposter.classList.remove("voted");
}
});
});
}
.imposter.voted {
background-color: red;
position: relative;
opacity: 0.7;
}
.imposter.voted::after {
content: "I voted";
position: absolute;
top: 5px;
right: 5px;
display: inline-block;
font-family: "Comic Sans Ms";
color: red;
}
.imposters__voting {
text-align: right;
}
<main class="dashboard">
<h1>Who Is The Imposter?</h1>
<div class="imposters">
<div class="imposter">Baba</div>
<div class="imposter">Baraki</div>
<div class="imposter">Garfield</div>
<div class="imposter">Erik</div>
<div class="imposter">GreenBlood4</div>
<div class="imposter">Easter</div>
</div>
</main>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>