时间戳

首页 > 解决方案 > HTML按钮没有消失？

javascript - HTML按钮没有消失？

问题描述

我试图让结果按钮在按下时消失，但我不能。我不明白这里有什么问题？

另外，我如何将输入到 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>

标签： javascriptjqueryhtml

解决方案

您应该重组代码以使用 a <form>，并使用 vanilla 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>

推荐阅读