javascript 如何使用 HTML 中的计算器按钮显示数字输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30962295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display number input using button for calculator in HTML?
提问by Nurul Akter Towhid
When I click numbers, I always get the same result. Why? Here is my HTML code:
当我点击数字时，我总是得到相同的结果。为什么？这是我的 HTML 代码：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<input type="button" id="myBtn" onclick="myFunction()" value="1">
<input type="button" id="myBtn" onclick="myFunction()" value="2">
<input type="button" id="myBtn" onclick="myFunction()" value="3">
<input type="button" id="myBtn" onclick="myFunction()" value="4">
<input type="button" id="myBtn" onclick="myFunction()" value="5">
<input type="button" id="myBtn" onclick="myFunction()" value="6">
<input type="button" id="myBtn" onclick="myFunction()" value="7">
<input type="button" id="myBtn" onclick="myFunction()" value="8">
<input type="button" id="myBtn" onclick="myFunction()" value="9">
<input type="button" id="myBtn" onclick="myFunction()" value="0">
<script>
function myFunction() {
var x = document.getElementById("myBtn").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>采纳答案by phts
1) Ids must be unique. Rewrite your HTML to use classes or unique ids.
1) ID 必须是唯一的。重写您的 HTML 以使用类或唯一 ID。
2) To get value in myFunctionyou can simply pass thisfrom elenment to access to clicked button.
2）要获得价值，myFunction您可以简单地this从元素传递到单击按钮的访问权限。
<input type="button" id="myBtn" onclick="myFunction(this)" value="1">
....
function myFunction(button) {
var x = button.value;
document.getElementById("demo").innerHTML = x;
}
Still have the problem in case of more than 1digit number
超过1位的号码仍有问题
Just concat string:
只需连接字符串：
document.getElementById("demo").innerHTML += x;
回答by Alexandre_Cbt
you can also keep logic only in Javascript, and removing the "onclick" on HTML. In the code bellow, all your buttons have "myBtn" class. You can have infinite time the same class. But ID's are unique, be carefull.
您还可以仅在 Javascript 中保留逻辑，并删除 HTML 上的“onclick”。在下面的代码中，您所有的按钮都有“myBtn”类。你可以有无限的时间在同一堂课上。但是 ID 是唯一的，要小心。
In this code I get the all class "myBtn", wich return an Array. On this array, I making a loop and add an eventListner listening clicks and calling the myFunction function.
在这段代码中，我得到了所有类“myBtn”，它返回一个数组。在这个数组上，我创建一个循环并添加一个 eventListner 监听点击并调用 myFunction 函数。
<p id="demo"></p>
<input type="button" class="myBtn" value="1">
<input type="button" class="myBtn" value="2">
<input type="button" class="myBtn" value="3">
<input type="button" class="myBtn" value="4">
<input type="button" class="myBtn" value="5">
<input type="button" class="myBtn" value="6">
<input type="button" class="myBtn" value="7">
<input type="button" class="myBtn" value="8">
<input type="button" class="myBtn" value="9">
<input type="button" class="myBtn" value="0">
<script>
const allBtns = document.querySelectorAll('.myBtn');
allBtns.forEach( element => {
element.addEventListener('click', myFunction);
})
function myFunction(e) {
const value = e.target.value;
document.getElementById("demo").innerHTML = value;
}
</script>
回答by user3721143
try
尝试
<input type="button" id="myBtn" onclick="myFunction(1)" >
<input type="button" id="myBtn" onclick="myFunction(2)" >
<input type="button" id="myBtn" onclick="myFunction(3)" >
<input type="button" id="myBtn" onclick="myFunction(4)" >
<input type="button" id="myBtn" onclick="myFunction(5)" >
<input type="button" id="myBtn" onclick="myFunction(6)" >
<input type="button" id="myBtn" onclick="myFunction(7)" >
<input type="button" id="myBtn" onclick="myFunction(8)" >
<input type="button" id="myBtn" onclick="myFunction(9)" >
<input type="button" id="myBtn" onclick="myFunction(0)" >
<script>
function myFunction(x) {
document.getElementById("demo").innerHTML = x;
}
</script>
