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

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 >
   <table >
      <tr>
         <td id="seatButton1"  colspan="2">
            <button >
               1
            </button>
         </td>
         <td  rowspan="3"></td>
         <td id="seatButton2"  colspan="2">
            <button >
               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.

CodePudding user response：

First, indeed you should add a class to them all that will signal they're related. But let's make a one function for the 18. although that is not necessarily the best solution, it should have the same effect.

for (var i = 1; i <= 18; i  ) {

  var element_id = "seatButton"   i;
  var elem = document.getElementById(element_id);

  elem.addEventListener("click", function() {

    if (elem.className == "seatLargeGreen") {
      elem.className = "seatLargeBlue";
    } else if (elem.className == "seatLargeBlue") {
      elem.className = "seatLargeGreen";
    }

    if (elem.className === "seatLargeBlue") {
      document.getElementById('snum').value = 1;
      document.getElementById('sclass').value = "Business";
    } else {
      document.getElementById('snum').value = "";
      document.getElementById('sclass').value = ""
    }

  })

}

CodePudding user response：

Capture the event on the click that carries the information you need:

seatButton1.addEventListener("click", function(event) {
    console.log(event.target.textContent);
});