Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu June 03, 2023 › #Button #for-loop

How to get value of clicked button in JavaScript

If you are thinking about how to get the value of a button clicked by one person in JavaScript, then in this article you will learn how to get the value of a clicked button.

If you have a couple of button, then you can add the onclick event for each button.

Demo - Get the value of clicked button
 <button onclick="alert(this.innerText)" >
   button 1
 <button onclick="alert(this.innerText)">
   button 2
 <button onclick="myFun(this)">
   button 3
Try it Yourself »
  1. I have created three button elements with onclick() event attribute.
  2. Inside the onclick() event, I have called alert() method to alert the button value.

If you have a lot of buttons, then the above approach is not elegant. So, in this case we need to create a forEach() method.

Get button value dynamically using forEach() method
let buttonList = document.querySelectorAll("button");
    i.addEventListener("click", function(e){
Try it Yourself »
  1. Suppose we have five buttons (you can have many buttons).
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
  2. Select all the buttons and store in a variable using the querySelectorAll() method.
    let buttonList = document.querySelectorAll("button");
    buttonList variable returns a nodeList that represents all the buttons.
  3. The forEach() method calls a function for each element of an array.
    We passed an anonymous function to the forEach() method and included a parameter i that will represent each button.
  4. Finally, when a button is clicked, the value of the clicked button will be alerted.
      i.addEventListener("click", function(e){


In this article, you have learned how to get value of clicked button using javascript.

Also read:

How to create button dynamically in Javascript.
AI Answer
1 Answer
Write Your Answer
  1. Use the below code. This will return the value of the clicked button.
    <button id="myButton" value="My Value">
      Click Me

    document.getElementById('myButton').addEventListener('click', () =>{

    const myValue = document.getElementById( 'myButton').value;

    console.log (myValue); // Output "My Value"

    Reply Delete
View All