JS change button value on click for multiple buttons

June 11, 2022

I have got 3 buttons and need to change their text when it’s clicked using Javascript. It works fine for the first one but the rest of them doesn’t get updated. I know one way of achieving this is by adding JS for different inputs and id. But I just want to write a single function which solves this issue.

<input id=-btn" type="button" value="ADD" />

<input id="btn" type="button" value="ADD" />

<input id="btn" type="button" value="ADD" />


document.getElementById("btn").addEventListener(
        "click",
        function (event) {
          if (event.target.value === "ADD") {
            event.target.value = "ADDED";
          } else {
            event.target.value = "ADD";
          }
        },
        false
      );

>Solution :

<input id=-btn" type="button" value="ADD" onclick="func(this)"/>

<input id="btn" type="button" value="ADD"  onclick="func(this)"/>

<input id="btn" type="button" value="ADD" onclick="func(this)"/>


<script>
        function func(event) {
          if (event.value === "ADD") {
            event.value = "ADDED";
          } else {
            event.value = "ADD";
          }
        }
      </script>