Question

为什么我的脚本不起作用？我觉得可能是浏览器相关的问题。它不适用于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>

Answer 1

我可以看到的主要原因当然是你没有添加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);

不仅出现上述错误，而且除了上述错误之外，还有很多错误。

没有<b>元素可以调用它。
<input />所有click都有相同的名称，我不明白它作为计算器的帮助＆＃34;。
没有与按钮关联的displayVal()事件。
您不需要$.click功能。
jQuery的onclick功能，而不是<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>。

总而言之，您提供的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);
    }
  });
});

<强>段

＆＃13;

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

＆＃13;

trainee

＆＃13;

小提琴：http://output.jsbin.com/popavosezi

Answer 2

$(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>

javascript计算器显示文本框

2 个答案: