1. 首页
  2. 问题列表
  3. JQuery语法问题
提问者：小点点

JQuery语法问题


我想做一个活的计算箱。 我想再次将其显示为文本。

到目前为止，我们已经成功地计算和显示了方程。 但我不知道在课文中显示正确答案所需的语法。

我想我需要代码将id a+b添加到函数main3中。 但我不知道怎么写。

有人能帮帮我吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script  src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>
<body>
<form oninput="c.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a">
+ <input type="number" id="b">
= <input type="number" id="c">
<br>
    <p id="output_a"></p>
    +
    <p id="output_b"></p>
    =
    <p id="output_c"></p>

<style>
p {
 display : inline-block; 
}
</style>

<script>

(function main1($) {
  var $a = $('#a');
  var $output_a = $('#output_a');
  var updateOutput1 = function () {
    $output_a.text($a.val());
  }

  $a.on('keyup', updateOutput1);
})(jQuery);

(function main2($) {
  var $b = $('#b');
  var $output_b = $('#output_b');
  var updateOutput2 = function () {
    $output_b.text($b.val());
  }

  $b.on('keyup', updateOutput2);
})(jQuery);

(function main3($) {
  var $c = $('#c');
  var $output_c = $('#output_c');
  var updateOutput3 = function () {
    $output_c.text($c.val());
  }

  $c.on('keyup', updateOutput3);
})(jQuery);
</script>
</body>
</html>

共2个答案

匿名用户

实际上，在您的特定情况下，由于您正在用id=“c”用jQuery本身更改input的值，所以根本不会触发keyup事件，因此修复此问题的一种可能方法是监听a和b而不是c的更改。

所以您的最终代码应该是这样的:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>
  <form oninput="c.value = parseInt(a.value) + parseInt(b.value)">
    <input type="number" id="a"> + <input type="number" id="b"> = <input type="number" id="c">
    <br>
    <p id="output_a"></p>
    +
    <p id="output_b"></p>
    =
    <p id="output_c"></p>
  </form>

  <style>
    p {
      display: inline-block;
    }
  </style>

  <script>
    var $a = $('#a');
    var $b = $('#b');
    var $c = $('#c');
    (function main1($) {
      var $output_a = $('#output_a');
      var updateOutput1 = function() {
        $output_a.text($a.val());
      }

      $a.on('keyup', updateOutput1);
    })(jQuery);

    (function main2($) {
      var $output_b = $('#output_b');
      var updateOutput2 = function() {
        $output_b.text($b.val());
      }

      $b.on('keyup', updateOutput2);
    })(jQuery);

    (function main3($) {
      var $output_c = $('#output_c');
      var updateOutput3 = function() {
        $output_c.text($c.val());
      }

      $a.on('keyup', updateOutput3);
      $b.on('keyup', updateOutput3);
    })(jQuery);
  </script>
</body>

</html>

匿名用户

我快速搜索了一下，找到了如何使用JavaScript将数字转换成单词

这就是你需要的吗？

相关问题