純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

在每個「按鈕」元素內部添加屬性「type =」按鈕「」。這將改變元素的行爲。目前，我認爲他們被視爲默認提交...這將刷新頁面並重置字段。

Answer 2

您的按鈕正在向同一頁面發送請求。如果您需要更多練習來開發此應用程序。

對於良好的練習，你必須編寫一個單獨的JavaScript代碼。

您無法使用純HTML代碼開發此計算器。因爲HTML不是一種計算語言。

Answer 3

每的文檔<button>：

屬性

類型

類型按鈕。可能的值有：

• submit：該按鈕將表單數據提交給服務器。如果未指定屬性，或者屬性動態更改爲空值或無效值，則這是默認值。
• reset：該按鈕將所有控件重置爲其初始值。
• button：該按鈕沒有默認行爲。它可以將客戶端腳本與元素的事件相關聯，這些事件在事件發生時觸發。
• menu：該按鈕打開一個通過其指定的<menu>元素定義的彈出菜單。 ¹

由於該屬性被省略，則默認（即提交）被使用並且每當被點擊這些按鈕中的一個，形式被提交併且因此出現整個界面消失。

選項來防止這種包括：

• 設置類型屬性按鈕爲按鈕
• 中的按鈕
的 的onclick屬性添加 return false;到在線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>