trying to create a movie seat booking program where if you click on a seat, as long as it is not already selected, the color of that seat turns cyan.
in my html code, i have multiple classes with the same name of 'seat' and in the DOM, i am targeting each one with a querySelectorAll and then using a loop to iterate through each one. I just cant come up with the correct code that turns the color 'cyan' upon click if the class does not have the class of 'occupied' along with 'seat'. here is my code, what do i add to my javascipt code to make this work? Added a 'what goes here' on my js code
Here is a pic of the program i am trying to make, code below is only part of the whole program. thank you
https://gyazo.com/17024efae51aadd1c537999ce94706eb
html:
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat occupied"></div>
<div class="seat occupied"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
css:
.seat {
width: 15px;
height: 12px;
background-color: rgba(129, 129, 129, 0.527);
margin: 4px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
js:
const seats = document.querySelectorAll('.seat');
for (let seat of seats) {
seat.addEventListener('click', function() {
if (!seat.classList.contains('occupied')) {
WHAT GOES HERE? (document.queryselector(seat).style.backgroundColor = 'cyan') DOES NOT WORK BUT THIS IS WHAT I AM TRYING TO DO
}
})
}
question from:
https://stackoverflow.com/questions/65661366/trying-to-create-a-program-where-if-you-click-on-a-seat-as-long-as-it-is-not-al 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…