Question

我想制作一个简单的计算器，但我不知道如何将输入的值传递给另一个。

    <table>
         <input type="text" id="screen"><br><br>
         <input type="button" value="1" id="digit">
         <input type="button" value="2" id="digit">
         <input type="button" value="+" id="operator">
        <input type="button" value="=" id="operator">
    </table>

这是我的HTML代码。我有2位数和2位运算符。现在我想编写一个代码，用于在屏幕输入中写入按下的数字的值。这是我的JS代码

$(document).ready(function(){
   var number = '';
   $(this).click(function(){
   number= $(this).val();
   $('#screen').val(number);
   });
})

Answer 1

您的代码中存在很多错误：

您所犯的第一个错误是无法重复id s 。它们应该是独一无二的。
其次，这不是有效的HTML。您不能直接在<table>标记内添加这些内容！
第三，你使用的eventListener毫无意义。

您可能需要的是：

＆＃13;

$(function () {
  $('input[type="button"]').click(function () {
    $("#screen").val($("#screen").val() + " " + $(this).val());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="screen" /><br /><br />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="+" />
<input type="button" value="=" />

＆＃13;

Answer 2

这里有几个问题：

input元素必须包含在<td>的{{1}}中，table本身必须位于<tr>
您需要实际选择一个元素，不能在this的范围内使用document来执行您需要的内容。
您在多个元素上拥有重复的id属性。请使用class将元素组合在一起。
number的全球定义是多余的。

一旦解决了这些问题，您的代码就可以运行：

＆＃13;

$(document).ready(function() {
  $('.digit').click(function() {
    var number = $(this).val();
    $('#screen').val(number);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" id="screen"><br><br>
      <input type="button" value="1" class="digit">
      <input type="button" value="2" class="digit">
      <input type="button" value="+" class="operator">
      <input type="button" value="=" class="operator">
    </td>
  </tr>
</table>

＆＃13;

将输入值传输到另一个

2 个答案: