纯 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

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

为了更好地练习，您必须编写单独的 javascript 代码。

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

Answer 2

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

Answer 3

根据 <button> 的文档：

Attributes

type

The type of the button. Possible values are:

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

reset: The button resets all the controls to their initial values.

button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

menu: The button opens a popup menu defined via its designated <menu> element.¹

因为省略了该属性，所以使用默认值（即 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}

Answer 4

问题是 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>

纯 HTML 计算器不工作

Pure HTML Calculator Not Working

html

dom

calculator

twitter-bootstrap-3

Attributes

type