make/merge multiple functions into one (or at least fewer) in javascript

Question

I have 18 buttons that I can click and I have the same function (clicking it changes the image) for each button and I would like to just use 1 function instead of 18. Moreover, each function also has another function attached that prints the number and the class of the button into an input field. If someone could help me slim all this code down into just a few or even 1 function would be awesome. Only pure html and javascript please.

This is the first 2 double functions of my javascript code:

function changeColor1() {
    if (document.getElementById("seatButton1").className == "seatLargeGreen") {
        document.getElementById("seatButton1").className = "seatLargeBlue";
    }
    else if (document.getElementById("seatButton1").className == "seatLargeBlue") {
        document.getElementById("seatButton1").className = "seatLargeGreen";
    }
}
seatButton1.addEventListener("click", function() {
    changeColor1();  
});
function num1() {
    if (document.getElementById('seatButton1').className === "seatLargeBlue") {
        document.getElementById('snum').value = 1;
        document.getElementById('sclass').value = "Business";
    }
    else {
        document.getElementById('snum').value = "";
        document.getElementById('sclass').value = ""
    }
}
seatButton1.addEventListener("click", function() {
    num1();
});
function changeColor2() {
    if (document.getElementById("seatButton2").className == "seatLargeGreen") {
        document.getElementById("seatButton2").className = "seatLargeBlue";
    }
    else if (document.getElementById("seatButton2").className == "seatLargeBlue") {
        document.getElementById("seatButton2").className = "seatLargeGreen";
    }
}
seatButton2.addEventListener("click", function() {
    changeColor2();  
});
function num2() {
    if (document.getElementById('seatButton2').className === "seatLargeBlue") {
        document.getElementById('snum').value = 2;
        document.getElementById('sclass').value = "Business";
    }
    else {
        document.getElementById('snum').value = "";
        document.getElementById('sclass').value = ""
    }
}
seatButton2.addEventListener("click", function() {
    num2();
});

There are 16 more like this. Here is the html for this part:

<article class="column1">
   <table class="table_seats">
      <tr>
         <td id="seatButton1" class="seatLargeGreen" colspan="2">
            <button class="seat_button_large">
               1
            </button>
         </td>
         <td class="aisle" rowspan="3"></td>
         <td id="seatButton2" class="seatLargeGreen" colspan="2">
            <button class="seat_button_large">
               2
            </button>
         </td>
      </tr>
   </table>
</article>

I don't think the css is necessary.

I've tried using document.querySelectorAll("#seatButton1, #seatButton2, ...") instead of document.getElementById() but I couldn't get that to work.

Answer 1

A more efficient way to do this would be to attach relevant data (snum, sclass) to the seat elements via data attributes and pass the element to the handler. Then your one event handler will read the data from the clicked element and update appropriately. Also, perform your doc queries once and store the results in variables.

const sclass = document.getElementById('sclass')
const snum = document.getElementById('snum')
const seats = document.querySelectorAll('td[class^="seat"]') // class attribute starts with...

function select(seat) {
  if (seat.className == "seatLargeGreen") {
    // find the previously selected seat
    let active = document.querySelector('.seatLargeBlue')
    if (active) { // if found deactivate
      active.className = 'seatLargeGreen'
    }

    seat.className = "seatLargeBlue";
    snum.value = seat.dataset.snum;
    sclass.value = seat.dataset.sclass;
  } else if (seat.className == "seatLargeBlue") {
    seat.className = "seatLargeGreen";
    snum.value = "";
    sclass.value = ""
  }
}

for (const [i, b] of seats.entries()) {
  b.addEventListener('click', e => select(e.currentTarget))
}

.seatLargeBlue button {
  background: blue;
  color: white;
}

.seatLargeGreen button {
  background: green;
  color: white;
}

.seat_button_large {
  padding: 1rem;
}

<article class="column1">
  <table class="table_seats">
    <tr>
      <td class="seatLargeGreen" colspan="2" data-snum="1" data-sclass="Business">
        <button class="seat_button_large">
          1
        </button>
      </td>
      <td class="aisle" rowspan="3"></td>
      <td class="seatLargeGreen" colspan="2" data-snum="2" data-sclass="Business">
        <button class="seat_button_large">
          2
        </button>
      </td>
      <td class="aisle" rowspan="3"></td>
      <td class="seatLargeGreen" colspan="2" data-snum="18" data-sclass="Economy">
        <button class="seat_button_large">
          18
        </button>
      </td>
    </tr>
  </table>
</article>
<input id="snum">
<input id="sclass">