How to select a clicked button form list of buttons with the same class names in js?

Question

I was working with some javascript code and i have a list of buttons with the same class names but i wanted to know which button among them is clicked inorder to get the value. How can I do that with vanilla js? Here is the sample code

<button onclick="chooseRating()" id="rateBtn" class="rateBtn" value="1">1</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="2">2</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="3">3</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="4">4</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="5">5</button>

and the js code i tried is

const rateBtn = document.getElementsByClassName("rateBtn");
function chooseRating() {
    for (rate in rateBtn) {
        console.log(rateBtn[rate]);
        if (rateBtn[rate].clicked === true) {
            rating = rateBtn[rate].value;
            console.log(rating);
            //shows 5 don't know why
        }
    }
}

It's showing 5 because [closures](https://stackoverflow.com/questions/19586137/addeventlistener-using-for-loop-and-passing-values), but your code has other issues. — General Grievance, Mar 21 '22 at 12:58

Eliott Kespi · Answer 1 · 2022-03-21T13:21:23.160

You should first of all define a unique id per button.

Additionally, you can pass the HTML element to your onClick method as a parameter.

So for example:

<button onclick="chooseRating(this)" id="rateBtn1" class="rateBtn" value="1">1</button>
<button onclick="chooseRating(this)" id="rateBtn2" class="rateBtn" value="2">2</button>
<button onclick="chooseRating(this)" id="rateBtn3" class="rateBtn" value="3">3</button>
<button onclick="chooseRating(this)" id="rateBtn4" class="rateBtn" value="4">4</button>
<button onclick="chooseRating(this)" id="rateBtn5" class="rateBtn" value="5">5</button>

You can then from vanilla javascript code get the ID and the value of your HTML button:

function chooseRating(e) {
    console.log(`my ID is ${e.id}, and my value is ${e.value}`);
}

Axander · Answer 2 · 2022-03-21T12:11:32.087

0

You can just pass on a variable to the function-call in each button. EXAMPLE: onclick="myFunction(variable)"

HTML-file:

   <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="1">
    1
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="2">
    2
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="3">
    3
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="4">
    4
  </button>
  <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="5">
    5
  </button>

JavaScript-file:

function myFunction(val) { console.log(val); }

edited Mar 21 '22 at 12:11

answered Mar 21 '22 at 11:00

Axander

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 21 '22 at 11:45

score -1 · Answer 3 · answered Mar 21 '22 at 10:41

HTML :

<button onclick="chooseRating()" id="rateBtn" class="rateBtn" value="1">1</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="2">2</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="3">3</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="4">4</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="5">5</button>

Index.js :

function chooseRating(e) {
  console.log (e.value);
}

you can see more in this

How to select a clicked button form list of buttons with the same class names in js?

3 Answers3