Solution 1 :

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}`);
}

Solution 2 :

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

Solution 3 :

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); }

Problem :

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

Comments

Comment posted by closures

It’s showing 5 because

Comment posted by edit

Your answer could be improved with additional supporting information. Please

By