admin管理员组

文章数量:1277876

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>

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>
  • javascript
Share Improve this question edited Jul 12, 2012 at 15:02 OnResolve 4,0323 gold badges31 silver badges51 bronze badges asked Jul 12, 2012 at 14:32 Kyle SmithKyle Smith 551 gold badge1 silver badge9 bronze badges 1
  • google? – danielQ Commented Jul 12, 2012 at 14:35
Add a ment  | 

5 Answers 5

Reset to default 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.

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>

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

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

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
}

本文标签： javascriptGetting the id of a button just clickedStack Overflow

版权声明：本文标题：javascript - Getting the id of a button just clicked - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741240503a2363880.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。