javascript - trying to create a program where if you click on a seat, as long as it is not already selected, the color of that seat turns cyan. DOM question

Question

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

Answer 1

You should add a class to the seat being iterated over if not occupied.

If occupied seats already have a cyan color, then add that class:

seat.classList.add('occupied');

Otherwise, add another rule for the cyan color - maybe call it selected - and add that class:

seat.classList.add('cyan');

const seats = document.querySelectorAll('.seat');

for (let seat of seats) {
  seat.addEventListener('click', function() {
    if (!seat.classList.contains('occupied')) {
      seat.classList.add('selected');
    }
  })
}

.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%;
}
.occupied {
   background-color: green;
}
.selected {
  background-color: cyan;
}

<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>