javascript - 当所有按钮命名相同时，获取单击的按钮值

Question

I have a situation where I have lots of buttons in a table on my web page.

Each button has the same name, but a different value set.

When I want to extract the button value, wouldn't using the below mean I am not getting the unique button value - the one that was actually clicked?

How can I get around that?

Thanks!!

document.getElementById("myBtn").value;

Answer 1

I think some of the comments / answers may be a little confusing. It might help to bind the same handler to each button and have it handle accordingly.

As @chr stated, try using something which will allow you to query all the buttons you want to attach the same click event to.

document.querySelectorAll(".myBtn");

Is one approach, however I suggest looking at how you can play with that query selector if you want to be a little more generic and get all buttons within your table.

Next, I suggest using a common click handler for each. In a javascript event, you are passed an event object as a parameter which will allow you to get information on the DOM element which initiated the event.

function myClickHandler(event) {
   var value = event.target.value;
   // Do stuff
}    

document.querySelectorAll(".myBtn").forEach(btn => {
    btn.addEventListener("click", myClickHandler);
});

Answer 2

First of all an id should be a unique identifier on the document.

If it is not unique you should use a class like: document.querySelectorAll(".myBtn"); .

Answer 3

Yes it might not be practical to id each button in a table. Lets imagine you have a buttons table like

 function getButton(el){ console.log(el.target.value); }

 <table onclick="getButton(event)"> <tr> <td><button name="button" value="1-1">Click</button></td> <td><button name="button" value="1-2">Click</button></td> <td><button name="button" value="1-3">Click</button></td> </tr > <tr> <td><button name="button" value="2-1">Click</button></td> <td><button name="button" value="2-2">Click</button></td> <td><button name="button" value="2-3">Click</button></td> </tr > <tr> <td><button name="button" value="3-1">Click</button></td> <td><button name="button" value="3-2">Click</button></td> <td><button name="button" value="3-3">Click</button></td> </tr > </table>

So when you click the button, you get the value. However this might not be what you are asking. If you would like to select a particular button in the table by JS dynamically, then you may easily do so by indexing the buttons through CSS selector logic as follows;

 function getButtonValue(r,c){ var el = document.querySelector(`table tr:nth-child(${r}) td:nth-child(${c}) button`); console.log(el.value); } getButtonValue(2,3);

 table tr:nth-child(2) td:nth-child(3) button { border: 1px solid red; border-radius: 3px }

 <table> <tr> <td><button name="button" value="1-1">Click</button></td> <td><button name="button" value="1-2">Click</button></td> <td><button name="button" value="1-3">Click</button></td> </tr > <tr> <td><button name="button" value="2-1">Click</button></td> <td><button name="button" value="2-2">Click</button></td> <td><button name="button" value="2-3">Click</button></td> </tr > <tr> <td><button name="button" value="3-1">Click</button></td> <td><button name="button" value="3-2">Click</button></td> <td><button name="button" value="3-3">Click</button></td> </tr > </table>