javascript计算器显示文本框

javascript calculator display text box

本文关键字：文本 显示 计算器 javascript      更新时间：2023-09-26

为什么我的脚本不能工作？我觉得这个问题可能和浏览器有关。它在chrome或IE中不起作用。

我的代码在下面。我已经做了一段时间了，我不明白为什么它不起作用。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-  8859-1">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="calc.css">
    <script type="text/javascript" >//src="calc.js">
      function displayVal(val){
        //document.getElementById("disp").value=val;
        $(document).ready(function(){
          $('b').onclick(function(){
            $('display').value=val;
          });
        });
      }
    </script>
  </head>
  <body>
    <form name="myDocument" id="myForm">
      <input type="text" name="display" id="display" value=""/>
      <input type="button" name="buttons" value="1" />
      <input type="button" name="buttons" value="2" />
      <input type="button" name="buttons" value="3" /></br>
      <input type="button" name="buttons" value="+" />
      <input type="button" name="buttons" value="=" />
    </form>
  </body>
</html>

我可以看到的主要原因当然是，您没有添加jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

最后你称之为：

$('b').onclick(function() { ... });

根本没有<b>元素。

这是完全错误的：

$('display').value=val;

应该是：

$("#display").val(val);

不仅仅是上面的错误，除了上面的错误之外，还有很多错误。

  1. 没有<b>元素可以调用它
  2. 所有的<input />都有相同的名字，我不明白这作为一个"计算器"有什么帮助
  3. 没有与按钮关联的click事件
  4. 您不需要displayVal()函数
  5. jQuery的$.click函数，而不是onclick

总之，您提供的HTML只是一个图像，毫无价值。这将是一个更好的替代方案。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Calci</title>
    <script type="text/javascript">
        $(document).ready(function (){
          var oldVal = 0;
          var op = "";
          // n - number
          // o - operation
          $('.n').click(function () {
            $('#display').val($('#display').val() + $(this).val());
          });
          $(".o").click(function () {
            if ($(this).val() == "+") {
              if (op == "+")
                oldVal = parseInt(oldVal) + parseInt($('#display').val());
              else
                oldVal = parseInt($('#display').val());
              $('#display').val("");
              op = "+";
            } else {
              if (op == "+")
                oldVal = parseInt(oldVal) + parseInt($('#display').val());
              else
                oldVal = parseInt($('#display').val());
              $('#display').val(oldVal);
            }
          });
        });
    </script>
  </head>
  <body>
    <form name="myDocument" id="myForm">
      <input type="text" name="display" id="display" value="" /><br />
      <input type="button" class="n" value="1" />
      <input type="button" class="n" value="2" />
      <input type="button" class="n" value="3" /><br />
      <input type="button" class="o" value="+" />
      <input type="button" class="o" value="=" />
    </form>
  </body>
</html>

代码段

$(document).ready(function (){
  var oldVal = 0;
  var op = "";
  // n - number
  // o - operation
  $('.n').click(function () {
    $('#display').val($('#display').val() + $(this).val());
  });
  $(".o").click(function () {
    if ($(this).val() == "+") {
      if (op == "+")
        oldVal = parseInt(oldVal) + parseInt($('#display').val());
      else
        oldVal = parseInt($('#display').val());
      $('#display').val("");
      op = "+";
    } else {
      if (op == "+")
        oldVal = parseInt(oldVal) + parseInt($('#display').val());
      else
        oldVal = parseInt($('#display').val());
      $('#display').val(oldVal);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="myDocument" id="myForm">
  <input type="text" name="display" id="display" value="" /><br />
  <input type="button" class="n" value="1" />
  <input type="button" class="n" value="2" />
  <input type="button" class="n" value="3" /><br />
  <input type="button" class="o" value="+" />
  <input type="button" class="o" value="=" />
</form>

Fiddle：http://output.jsbin.com/popavosezi

$(function() {
  $(document).ready(function() {
    var x = '';
    $('[name="buttons"]').click(function() {
      //console.log($('[name="buttons"]').val());
      x += $(this).val();
      $("#display").val(x);
    });
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Calculator</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div>
    <input type="text" name="display" id="display" value="" />
    <input type="button" name="buttons" value="1" />
    <input type="button" name="buttons" value="2" />
    <input type="button" name="buttons" value="3" />
    </br>
    <input type="button" name="buttons" value="+" />
    <input type="button" name="buttons" value="=" />
  </div>
</body>
</html>

相关文章：