爲什麼這個javascript代碼沒有輸出？我錯過了什麼？

-1

下面是我編寫的一些示例代碼，因爲我有一個難以工作的任務，現在，我甚至無法使其工作。試圖顯示將兩個數字相加的輸出，我錯過了什麼？爲什麼這個javascript代碼沒有輸出？我錯過了什麼？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample</title> 
    <script type="text/javascript"> 
     function Add() { 
      var n1 = document.getElementById("numOne").value; 
      var n2 = document.getElementById("numTwo").value; 
      var total = n1 + n2; 

      document.getElementById("output").innerHTML = total; 
     } 
    </script> 
</head> 
<body> 
    <h1>Calc</h1><br /> 
    <form method="post" action=""> 
     NUM 1: <input type="number" name="numOne" id="numOne" /><br /> 

     NUM 2: <input type="number" name="numTwo" id="numTwo" /><br /> 

     <input type="button" value="Add" onclick="ADD()" /><br /> 

     Result: <label id="output"></label> 
    </form> 
</body> 
</html>

來源

2017-10-08 Tanner Plato

'ADD（）'！='Add（）'。你應該學習一些基本的調試技巧，比如使用瀏覽器的開發工具，尤其是控制檯。它會立即向你顯示這樣的事情。您還將兩個字符串連接在一起，因此您應該在輸出結果之前將它們轉換爲數字。 – j08691

'onclick =「Add（）」'？ – PredatorIWD

「這個問題是由於無法再現的問題或簡單的印刷錯誤造成的。」 - 投票結束，作爲題外話題。 – Quentin

您需要在引用它時匹配函數名稱的大小寫。 ADD()應該是Add()。請向您的開發人員控制檯查詢錯誤消息。

另外，如果你想總結這兩個數字，你需要首先將它們從字符串轉換爲不連接。

function Add() { 
     var n1 = document.getElementById("numOne").value; 
     var n2 = document.getElementById("numTwo").value; 
     var total = parseInt(n1, 10) + parseInt(n2, 10); 

     document.getElementById("output").innerHTML = total; 
    }

在這裏，我用parseInt()與10基數的數字字符串轉換爲數字。

來源

2017-10-08 18:25:54 llama

ADD() =>變化到Add()（JavaScript是區分大小寫）

函數字符串轉換爲數字。完美運行，運行並看看。（如果你不把這個，和你的輸入，說，5和6，那麼你的輸出就會56（字符串連接），而不是11）

<head> 
 
    <title>Sample</title> 
 
    <script type="text/javascript"> 
 
     function Add() { 
 
      var n1 = document.getElementById("numOne").value; 
 
      var n2 = document.getElementById("numTwo").value; 
 
      var total = Number(n1) + Number(n2); // Number() function 
 

 
      document.getElementById("output").innerHTML = total; 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
    <h1>Calc</h1><br /> 
 
    <form method="post" action=""> 
 
     NUM 1: <input type="number" name="numOne" id="numOne" /><br /> 
 

 
     NUM 2: <input type="number" name="numTwo" id="numTwo" /><br /> 
 

 
     <input type="button" value="Add" onclick="Add()" /><br /> 
 

 
     Result: <label id="output"></label> 
 
    </form> 
 
</body>

來源

2017-10-08 18:28:57 Miraj50

謝謝你，現在輸出顯示。但我的任務仍然沒有工作。第2輪？ –

對不起，我沒有得到你。第2輪？!!嘗試添加'html'標籤和'<！DOCTYPE html>'，如果您正在使用PC而不是像jsfiddle這樣的地方。 – Miraj50

函數名是區分大小寫的，則需要更改此：

<input type="button" value="Add" onclick="ADD()" /><br />

要這樣：

<input type="button" value="Add" onclick="Add()" /><br />

來源

2017-10-08 18:29:30

爲什麼這個javascript代碼沒有輸出？我錯過了什麼？

回答

相關問題