Getting the id of a button just clicked

Question

I'm trying to create a calculator webapp using JS and I'm running into some problems. I looked at other open threads and tried that code but it didn't seem to work. I'm currently just trying to log the ID of the button that was pressed, but when I press a button all I get is "undefined" back. Here's my code:

<html>
<head>
<title>Calculator</title>
</head>

<body>

<p id="text">
<table border="0" id="table">
  <tr>
  <td><input type="button" id="one" value="1" onClick="calculate();"></td>
  <td><input type="button" id="two" value="2" onClick="calculate();"></td>
  <td><input type="button" id="three" value="3" onClick="calculate();"></td>
  </tr>

  <tr>
  <td><input type="button" id="four" value="4" onClick="calculate();"></td>
  <td><input type="button" id="five" value="5" onClick="calculate();"></td>
  <td><input type="button" id="six" value="6" onClick="calculate();"></td>
  </tr>

  <tr>
  <td><input type="button" id="seven" value="7" onClick="calculate();"></td>
  <td><input type="button" id="eight" value="8" onClick="calculate();"></td>
  <td><input type="button" id="nine" value= "9" onClick="calculate();"></td>
  </tr>

  <tr>
    <td> </td>
    <td><input type="button" id="zero" value="0" onClick="calculate();"></td>
  </tr>

</table>




<script>
function calculate(){
console.log(this.id);
}


</script>

</body>
</html>

[google?](http://stackoverflow.com/questions/4825295/javascript-onclick-get-the-id-of-the-button-clicked) — danielQ, Jul 12 '12 at 14:35

Engineer · Accepted Answer · 2012-07-12T14:54:16.343

5

Try like this:

function calculate(){
   var e = window.event,
       btn = e.target || e.srcElement;
   alert(btn.id);
}

Live demo

Explanation:

window.event holds an information about last occured event. In your case , it's 'click' event. You can retrieve the DOM Element,which is being clicked, from the event object.The target or srcElement property (depends on type of the browser) represents that DOM Element.

edited Jul 12 '12 at 14:54

answered Jul 12 '12 at 14:39

Engineer

47,849
12
88
91

Thanks! That worked out great. Any chance you can give a little explanation at whats going on for these two lines? var e = window.event, btn = e.target || e.srcElement; – Kyle Smith Jul 12 '12 at 14:48
@KyleSmith See the explanation section. – Engineer Jul 12 '12 at 14:54

score 1 · Answer 2 · answered Jul 12 '12 at 14:38

1

You can use event.target to get the element.

<input type="button" id="one" value="1" onclick="calculate(event);">
<script>
function calculate(event) {
  console.log(event.target.id);
}
</script>

answered Jul 12 '12 at 14:38

Florent

12,310
10
49
58

score 1 · Answer 3 · answered Jul 12 '12 at 14:40

<script type="text/javascript">
    function calc(e) {
        console.log(e.id);
    }
</script>

<input type="button" id="btn" onclick="calc(this)" />

You need put a lot more effort into self study :-) Knowledge is never gained unless an effort is made.

score 0 · Answer 4 · answered Jul 12 '12 at 14:34

If your hard writing them in as it appears you are above, you could just pass the id value as a parameter to the function

onClick="calculate(one)";
onClick="calculate(two)";
onClick="calculate(three)";

etc...

It's not terrible efficient but should work for your case. Then your function can be something like:

function calculate(number){
alert(number);
}

score 0 · Answer 5 · answered Jul 12 '12 at 14:35

0

Its simple

onclick=alert(this.id)

or,in your case :

onclick=calculate()

Script:

function calculate(){
  alert(this.id)
  //this.id - hold the value of the id of the button just click
}

answered Jul 12 '12 at 14:35

Vivek Chandra

4,240
9
33
38

Getting the id of a button just clicked

5 Answers5