CODEWITHSUNDEEP
javascript
Kyle Smith
Kyle Smith

Reputation: 55

Getting the id of a button just clicked

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>

Upvotes: 1

Views: 17866

Answers (5)

Engineer
Engineer

Reputation: 48793

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.

Upvotes: 5

TWickz
TWickz

Reputation: 632

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

Upvotes: 1

Florent
Florent

Reputation: 12420

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>

Upvotes: 1

Vivek Chandra
Vivek Chandra

Reputation: 4358

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
}

Upvotes: 0

Ryan Beaulieu
Ryan Beaulieu

Reputation: 453

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

Upvotes: 0

Related Questions