纯 HTML 计算器不工作

Question

我想尝试制作一个计算器，但遇到了一个错误。当我在计算器中输入一个数字时，我输入的项目会显示一瞬间，但随后整个界面变得不可见。我对每个按钮都尝试了这个，但结果相同。我还测试了添加= 符号，但没有帮助解决该错误。代码如下：

 <div class="fluid-container">
  <form name="calculator">
    <input type="textfield" name="ans" value="" class="form-control" placeholder="Result"><br>
    <div class="row">
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='1'">1</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='4'">4</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='7'">7</button><br>
        <button class="btn btn-danger" onclick="root()">√</button>
      </div>
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='2'">2</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='5'">5</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='8'">8</button><br>
        <button class="btn btn-danger">x<sup>y</sup></button>
      </div>
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='3'">3</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='6'">6</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='9'">9</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='0'">0</button>
      </div>
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='/'">÷</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='*'">x</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='+'">+</button><br>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='-'">-</button>
      </div>
    </div>
  </form>
</div><hr>

Answer 1

在每个 'button' 元素内，添加属性 'type="button"'。这将改变元素的行为。目前，我认为它们默认被视为提交......这将刷新页面并重置字段。

Answer 2

您的按钮正在向同一页面发出获取请求。如果您需要更多练习来开发此应用程序。

为了进行良好的练习，您必须编写单独的 javascript 代码。

您无法使用纯 HTML 代码开发此计算器。因为 HTML 不是计算语言。

Answer 3

问题是button（在您的标记中）与input（用于在线示例）相比的使用 - 单击button 提交表单。输入没有。更新您的 HTML 以使用输入，您会看到它有效。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fluid-container">
    <form name="calculator">
      <input type="textfield" name="ans" value="" class="form-control" placeholder="Result"><br>
      <div class="row">
        <div class="col-lg-3">
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='1'" value="1"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='4'" value="4"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='7'" value="7"></input><br>
          <input type="button" class="btn btn-danger" onclick="root()" value="√"></input>
        </div>
        <div class="col-lg-3">
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='2'" value="2"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='5'" value="5"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='8'" value="8"></input><br>
          <input type="button" class="btn btn-danger" value="xy"></input>
        </div>
        <div class="col-lg-3">
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='3'" value="3"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='6'" value="6"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='9'" value="9"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='0'" value="0"></input>
        </div>
        <div class="col-lg-3">
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='/'" value="÷"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='*'" value="x"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='+'" value="+"></input><br>
          <input type="button" class="btn btn-danger" onclick="document.calculator.ans.value+='-'" value="-"></input>
        </div>
      </div>
    </form>
  </div><hr>

Answer 4

根据<button> 的文档：

属性

类型

按钮的类型。可能的值是：

• submit：按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。
• reset：该按钮将所有控件重置为其初始值。
• button：按钮没有默认行为。它可以有与元素事件相关联的客户端脚本，这些事件在事件发生时触发。
• menu：该按钮打开一个通过其指定的<menu> 元素定义的弹出菜单。¹

因为省略了该属性，所以使用默认值（即 submit），并且每当单击其中一个按钮时，都会提交表单，因此整个界面似乎消失了。

防止这种情况的选项包括：

• 将按钮的 type 属性设置为 button
• 将return false; 添加到按钮的onclick 属性中的内联Iavascript

请看下面的演示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container">
  <form name="calculator">
    <input type="textfield" name="ans" value="" class="form-control" placeholder="Result"><br>
    <div class="row">
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='1';return false">1</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='4'" type="button">4</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='7'" type="button">7</button>
        <button class="btn btn-danger" onclick="root()">√</button>
      </div>
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='2'" type="button">2</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='5'" type="button">5</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='8'" type="button">8</button>
        <button class="btn btn-danger">x<sup>y</sup></button>
      </div>
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='3'" type="button">3</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='6'" type="button">6</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='9'" type="button">9</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='0'" type="button">0</button>
      </div>
      <div class="col-lg-3">
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='/'" type="button">÷</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='*'" type="button">x</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='+';return false">+</button>
        <button class="btn btn-danger" onclick="document.calculator.ans.value+='-'" type="button">-</button>
      </div>
    </div>
  </form>
</div>
<hr>

---

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}