Question

我正在尝试使结果按钮在按下时消失，但我不能。我不明白这里是什么问题？

我又如何将在n1和n2字段中输入的参数传递到我的jQuery脚本中？

<!DOCTYPE html>

<html>
    <head>

        <title>javascript: calculate two numbers</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <h1> A Basic Calculator</h1>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
         $("#result").click(function(){
           $("#result").hide();
          });
         });
     </script>

    <body>
        <b>Enter Number 1:</b>
        <input type="text" id="n1"/><br/><br/>
        <b>Enter Number 2:</b>
        <input type="text" id="n2" name="n2"/><br/><br/>

        <select id="operators">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="/">/</option>
            <option value="X">X</option>
        </select>

        <button id="result">=</button>
        <input type="text" id="result"/>

    </body>

</html>

Answer 1

您应该重组代码以使用<form>，并使用普通javascript而不是jQuery（您似乎遇到了导入问题）：

document.querySelector('form#calculator').addEventListener('submit', function (e) {
    e.preventDefault()

    const n1 = this.querySelector('input#n1').value
    const n2 = this.querySelector('input#n2').value
    const operator = this.querySelector('select#operators').value
    const result = eval(n1 + operator + n2)

    this.querySelector('button#result').style.display = "none"
    this.querySelector('input#result').value = result
})

<form id="calculator">
  <b>Enter Number 1:</b>
  <input type="number" id="n1" name="n1" required /><br/><br/>
  <b>Enter Number 2:</b>
  <input type="number" id="n2" name="n2" required /><br/><br/>

  <select id="operators">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="/">/</option>
      <option value="x">x</option>
  </select>

  <button id="result">=</button>
  <input type="text" id="result"/>
</form>

Answer 2

有两个ID为result的HTML元素，因此我建议您先进行更改：

<button id="result">=</button>
<input type="text" id="result-field"/>

可以使用其ID提取输入值：

$(document).ready(function(){
    $("#result").click(function(){
      $("#result").hide();
      let n1val = $("#n1").val();
      let n2val = $("#n2").val();
      // do something with the values
     });
});

HTML按钮没有消失？

2 个答案: