如何使用HTML中的计算器按钮显示数字输入?

努尔·阿克特·托维德(Nurul Akter Towhid)

单击数字时,总是得到相同的结果。为什么?这是我的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>

phts

1)ID必须是唯一的。重写HTML以使用类或唯一ID。

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

http://jsfiddle.net/0sewtjLs/


如果数字多于1位仍然有问题

只是连接字符串:

document.getElementById("demo").innerHTML += x;

http://jsfiddle.net/0sewtjLs/1/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带数字和单选按钮的Javascript / HTML计算器未显示输出

来自分类Dev

当单击按钮时,如何在onclick事件中使用单引号来在计算器中显示某个单词?

来自分类Dev

如何使用成本计算器的范围输入为数字增加价值?

来自分类Dev

如何在Windows窗体计算器中的计算器中创建零按钮

来自分类Dev

如何为计算器HTML设置按钮样式

来自分类Dev

计算器中的按钮无法正常使用Java

来自分类Dev

如何在计算器中显示算术运算的结果?

来自分类Dev

当用户输入错误时,如何在我的Python重量计算器中显示错误消息

来自分类Dev

如何在显示标签上显示所有数字?-基本计算器

来自分类Dev

如何使用html和js删除计算器中的单个sigit?

来自分类Dev

如何使用jQuery解决计算器中的负值

来自分类Dev

程序计算器,使用PHP进行计算和HTML输入表单

来自分类Dev

如何在Ubuntu的计算器上显示数字的逗号分隔?

来自分类Dev

显示 C# 中 2 个数字之间差异的简单计算器

来自分类Dev

在计算器的单个文本框中显示大数字的逗号

来自分类Dev

计算器HTML

来自分类Dev

输入第一个数字,然后在计算器中输入运算符

来自分类Dev

为什么在我按下计算器中的“C”按钮后,我不能在它后面使用数字键,只能单击鼠标?

来自分类Dev

如何使用正则表达式使用JavaScript进行计算器输入?

来自分类Dev

使用文本属性中的“&”从键盘输入的 C# 中的计算器

来自分类Dev

如何在计算器工作中实现加/减按钮?

来自分类Dev

如何在pyqt5中创建类似于计算器的按钮网格

来自分类Dev

如何获得用户输入验证到我的Java计算器程序中?

来自分类Dev

如何返回表格输入并在运行总计算器中更新javascript变量

来自分类Dev

C语言中的计算器中较大的数字

来自分类Dev

如何向计算器添加按钮

来自分类Dev

如何解析计算器输入字符串

来自分类Dev

如何在python中放置计算器的输入检查?

来自分类Dev

计算器中的清除按钮无响应

Related 相关文章

  1. 1

    带数字和单选按钮的Javascript / HTML计算器未显示输出

  2. 2

    当单击按钮时,如何在onclick事件中使用单引号来在计算器中显示某个单词?

  3. 3

    如何使用成本计算器的范围输入为数字增加价值?

  4. 4

    如何在Windows窗体计算器中的计算器中创建零按钮

  5. 5

    如何为计算器HTML设置按钮样式

  6. 6

    计算器中的按钮无法正常使用Java

  7. 7

    如何在计算器中显示算术运算的结果?

  8. 8

    当用户输入错误时,如何在我的Python重量计算器中显示错误消息

  9. 9

    如何在显示标签上显示所有数字?-基本计算器

  10. 10

    如何使用html和js删除计算器中的单个sigit?

  11. 11

    如何使用jQuery解决计算器中的负值

  12. 12

    程序计算器,使用PHP进行计算和HTML输入表单

  13. 13

    如何在Ubuntu的计算器上显示数字的逗号分隔?

  14. 14

    显示 C# 中 2 个数字之间差异的简单计算器

  15. 15

    在计算器的单个文本框中显示大数字的逗号

  16. 16

    计算器HTML

  17. 17

    输入第一个数字,然后在计算器中输入运算符

  18. 18

    为什么在我按下计算器中的“C”按钮后,我不能在它后面使用数字键,只能单击鼠标?

  19. 19

    如何使用正则表达式使用JavaScript进行计算器输入?

  20. 20

    使用文本属性中的“&”从键盘输入的 C# 中的计算器

  21. 21

    如何在计算器工作中实现加/减按钮?

  22. 22

    如何在pyqt5中创建类似于计算器的按钮网格

  23. 23

    如何获得用户输入验证到我的Java计算器程序中?

  24. 24

    如何返回表格输入并在运行总计算器中更新javascript变量

  25. 25

    C语言中的计算器中较大的数字

  26. 26

    如何向计算器添加按钮

  27. 27

    如何解析计算器输入字符串

  28. 28

    如何在python中放置计算器的输入检查?

  29. 29

    计算器中的清除按钮无响应

热门标签

归档