Question

我想尝试制作计算器，但我遇到了一个错误。当我在计算器中输入一个数字时，我输入的项目会显示一瞬间，但整个界面变得不可见。我为每个按钮尝试了这个，但是会出现相同的结果。我还测试了添加一个=标志，没有运气帮助这个bug。这是代码：

 <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

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

Answer 3

根据<button>的文档：

属性

型

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


submit：该按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。

reset：该按钮会将所有控件重置为初始值。

button：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些事件在事件发生时触发。

menu：该按钮打开一个通过其指定的<menu>元素定义的弹出菜单。¹

由于省略了该属性，因此使用默认值（即 submit ），只要单击其中一个按钮，表单就会被提交，从而看起来整个界面都消失了。

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

为按钮设置类型属性为按钮
将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计算器不起作用

4 个答案:

属性

型