Javascript onlick属性能否为document.getelementbyID提供函数，而不替换最后一个值？

我正在用html制作一个数字键盘，上面有数字1-9，我不知道javascript是否可以对每个键使用onclick函数来在display div中显示数字。我得到的最好的方法是什么

<div id="display"></div>
<script>
   function  keyvalue (val)
   {
    if (val == 7) {
    document.getElementById("demo").innerHTML = "7";
    } else if (val == 8) {
    document.getElementById('demo').innerHTML = "8"; 
    ....if statements just replace the content.
</script>
<div id="keypad">
       <div id="seven" onClick="keyvalue(7)" class="key"><p>7</p></div>
       <div id="eight" onClick="keyvalue(8)" class="key"><p>8</p></div>
       <div id="nine"  onClick="keyvalue(9)" class="key"><p>9</p></div>
       <div id="four" onClick="keyvalue(4)" class="key"><p>4</p></div>
       <div id="five" onClick="keyvalue(5)" class="key"><p>5</p></div>
       <div id="six" onClick="keyvalue(6)" class="key"><p>6</p></div>
       <div id="one" onClick="keyvalue(1)" class="key"><p>1</p></div>
       <div id="two" onClick="keyvalue(2)" class="key"><p>2</p></div>
       <div id="three" onClick="keyvalue(3)"class="key"><p>3</p></div>
       <div id="zero" onClick="keyvalue(0)"class="zero">0</div>
   </div> 

---

你可以把这个传给onclick

<p id="demo" onClick="myFunction(this, 'red')">Click me to change my text color.</p>

---

问题在于javascript中的onclick不是onclick

演示：

---

我不太确定你在找什么，但这对我很有用

或者使用jQuery：

$('.key').click(function() {
  $('#display').text($(this).text());
});

---

最简洁的解决方案实际上不是在每个按钮上设置事件侦听器，而是在这些按钮的父元素上设置事件侦听器，如下所示：

document.getElementById("keypad").addEventListener("click", function(event){
    document.getElementById("demo").textContent = 
      +document.getElementById("demo").textContent + +event.target.textContent
}, true)

---

单击事件将在向键激发时通过键盘容器，因此无论哪个键是目标键，它都将被捕获。

如果您反对自动类型强制，为什么不使用函数keyvalue val{document.getElementByIddemo.innerHTML=val；}或Stringval呢，这是什么情况-insensitive@Touffy：请检查我的代码，它正在工作，您无法将其设置为-1。请不要在意你的代码是否有效。您给出的解释有误导性。您所说的是正确的，但并不相关，因为onclick属性在代码中的任何地方都没有使用，只有HTML onclick属性不区分大小写。@尽管您可以尝试使用onclick，但它将不起作用。。。这是给观众的，他们可以从这里学到一些东西。。。对于任何愚蠢的问题，你都不可能做到-1。非常接近。当按钮单击时，它会添加到您单击的数字的显示中，以便收集它们而不是将它们交换出去。在这种情况下，请在innerHTMLThat之后使用+=而不是=！不知道+=能做什么。非常感谢arcyqwerty！结案

<div id="display"></div>
<script>
function keyvalue(val){
  document.getElementById("display").innerHTML = val;
}
</script>
<div id="keypad">
   <div id="seven" onClick="keyvalue(7)" class="key"><p>7</p></div>
   <div id="eight" onClick="keyvalue(8)" class="key"><p>8</p></div>
   <div id="nine"  onClick="keyvalue(9)" class="key"><p>9</p></div>
   <div id="four" onClick="keyvalue(4)" class="key"><p>4</p></div>
   <div id="five" onClick="keyvalue(5)" class="key"><p>5</p></div>
   <div id="six" onClick="keyvalue(6)" class="key"><p>6</p></div>
   <div id="one" onClick="keyvalue(1)" class="key"><p>1</p></div>
   <div id="two" onClick="keyvalue(2)" class="key"><p>2</p></div>
   <div id="three" onClick="keyvalue(3)" class="key"><p>3</p></div>
   <div id="zero" onClick="keyvalue(0)" class="zero"><p>0</p></div>
</div> 

Array.apply([], document.querySelectorAll('.key')).forEach(function(e) {
  e.onclick = keyvalue.bind(null, e.innerText);
});

$('.key').click(function() {
  $('#display').text($(this).text());
});

document.getElementById("keypad").addEventListener("click", function(event){
    document.getElementById("demo").textContent = 
      +document.getElementById("demo").textContent + +event.target.textContent
}, true)