JavaScript計算器腳本不起作用

我正在學習JavaScript。嘗試使用DOM製作一個簡單的計算器。我寫了下面的腳本，但是我的腳本給出了錯誤。 遺漏的類型錯誤：無法讀取空calculator.html的特性 '值'：8JavaScript計算器腳本不起作用

這裏是我的腳本：

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Calculator</title> 
</head> 
<body> 
    <script type="text/javascript"> 
     var f_number = document.getElementById("f_number").value; 
     var f_number = document.getElementById("s_number").value; 

     function calculate(opa) 
     { 
      if(opa=='+') 
      { 
       var result = Number(f_number) + Number(s_number); 
      } 
      if(opa=='-') 
      { 
       var result = f_number - s_number; 
      } 
      if(opa=='*') 
      { 
       var result = f_number * s_number; 
      } 
      if(opa=='/') 
      { 
       var result = f_number/s_number; 
      } 
      return document.getElementById('res').value = result; 
     } 
    </script> 
    <div class="container"> 
     <table> 
      <tr> 
       <td>First Number</td> 
       <td><input type="number" id="f_number" ></td> 
      </tr> 
      <tr> 
       <td>Second Number</td> 
       <td><input type="number" id="s_number" ></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td> 
       <input type="submit" value="+" onclick="calculate()" > 
       <input type="submit" value="-" onclick="calculate()" > 
       <input type="submit" value="*" onclick="calculate()" > 
       <input type="submit" value="/" onclick="calculate()" > 
       </td> 
      </tr> 
      <tr> 
       <td>Result</td> 
       <td><input type="text" id="res"></td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

來源

2016-03-07 Nishan Singha

把你的JavaScript代碼的權利之前''我 –

把我的腳本之前。現在我的結果顯示未定義。 –

完整的示例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Calculator</title> 
</head> 
<body> 
    <div class="container"> 
     <table> 
      <tr> 
       <td>First Number</td> 
       <td><input type="number" id="f_number" ></td> 
      </tr> 
      <tr> 
       <td>Second Number</td> 
       <td><input type="number" id="s_number" ></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td> 
       <input type="submit" value="+" onclick="calculate('+')" > 
       <input type="submit" value="-" onclick="calculate('-')" > 
       <input type="submit" value="*" onclick="calculate('*')" > 
       <input type="submit" value="/" onclick="calculate('/')" > 
       </td> 
      </tr> 
      <tr> 
       <td>Result</td> 
       <td><input type="text" id="res"></td> 
      </tr> 
     </table> 
    </div> 
    <script type="text/javascript"> 
     function calculate(opa) 
     { 
      var f_number = +document.getElementById("f_number").value; 
      var s_number = +document.getElementById("s_number").value; 
      if(opa=='+') 
      { 
       var result = f_number + s_number; 
      } 
      if(opa=='-') 
      { 
       var result = f_number - s_number; 
      } 
      if(opa=='*') 
      { 
       var result = f_number * s_number; 
      } 
      if(opa=='/') 
      { 
       var result = f_number/s_number; 
      } 
      return document.getElementById('res').value = result; 
     } 
    </script> 
</body> 
</html>

來源

2016-03-07 16:59:06

它的工作原理。我想知道爲什麼在文檔之前有+？ –

'document.getElementById（「f_number」）.value'返回'string'類型的值。我們必須使它成爲'float'類型。用'+'我們把它從'字符串'轉換爲'float'型號 –

感謝您的好和簡單的解釋。 –

這意味着有這些項目沒有值：

var f_number = document.getElementById("f_number").value; 
var f_number = document.getElementById("s_number").value;

您需要運行腳本，一旦存在值/按鈕被單擊而不是立即。

來源

2016-03-07 16:42:47 ltalhouarne

請再看看我的腳本。我加了onlclick =「calculate（）」。給出相同的錯誤。 –

我在之前放置了我的腳本。錯誤消失了。現在我的結果顯示未定義。 –

JavaScript按照遇到的順序被執行。

當你做document.getElementById("f_number").value那個DOM節點還不存在。所以它返回null，因此錯誤消息。

將您的代碼移動到引用的DOM節點定義的下方，或在文檔準備就緒或onload上運行您的代碼。工作代碼

來源

2016-03-07 16:43:05 Halcyon

JavaScript計算器腳本不起作用

回答

相關問題