HTML5表單顯示[對象HTMLInputElement] [對象HTMLInputElement]而不是實際結果添加兩個數字

我是新來的html5和javascript，並且正在使用html5和javascript編寫一個簡單的表單。當我按netbeans運行時，表單按預期顯示在chromo上，但是當我輸入兩個數字並按add時，而不是在結果列中顯示3，而是顯示[object HTMLInputElement][object HTMLInputElement]。HTML5表單顯示[對象HTMLInputElement] [對象HTMLInputElement]而不是實際結果添加兩個數字

可能有人請告訴我爲什麼發生這種情況？我該如何解決這個錯誤？

<html> 
    <head> 
     <title>TODO supply a title</title> 
     <link rel="shortcut icon" href=""><!--this is to be removed for production code, its been placed here because otherwise netbeans produce error message--> 

     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <script type="text/javascript"> 
      function addTwoNumbers() { 
       var firstNumber = document.getElementById("txtFirstNumber").valueOf(); 
       var secondNumber = document.getElementById("txtSecondNumber").valueOf(); 

       document.getElementById("txtResult").value = firstNumber + secondNumber; 
      } 
     </script> 
    </head> 
    <body> 
     <form> 
      First number<br> 
      <input type="text" ID="txtFirstNumber"><br> 
      Second number<br> 
      <input type="text" ID="txtSecondNumber"><br> 
      Result:<br> 
      <input type="text" ID="txtResult"><br> 
      <br> 
      <input type="button" value='add' id='btnAdd' onclick="addTwoNumbers()" /> 
     </form> 
    </body> 
</html>

來源

2016-06-27 Thor

[CodePen代碼一起玩的（http://codepen.io/anthonyastige/pen/VjPOeR） –

使用value屬性作爲Object.prototype.valueOf()方法返回指定對象的原始值（在你的情況，一個DOMElement）

也投input-value到Number然後操縱因爲Element.value返回一個String而+將連接這些值，而不是adding！

Unary plus (+)，的unary plus operator先於其操作數，並計算其操作數，而是試圖將其轉換成number，如果它是不是已經。

function addTwoNumbers() { 
 
    var firstNumber = +document.getElementById("txtFirstNumber").value; 
 
    var secondNumber = +document.getElementById("txtSecondNumber").value; 
 
    //Output of `valueOf()` 
 
    console.log(document.getElementById("txtFirstNumber").valueOf()); 
 
    document.getElementById("txtResult").value = firstNumber + secondNumber; 
 
}

<form> 
 
    First number 
 
    <br> 
 
    <input type="text" ID="txtFirstNumber"> 
 
    <br>Second number 
 
    <br> 
 
    <input type="text" ID="txtSecondNumber"> 
 
    <br>Result: 
 
    <br> 
 
    <input type="text" ID="txtResult"> 
 
    <br> 
 
    <br> 
 
    <input type="button" value='add' id='btnAdd' onclick="addTwoNumbers()" /> 
 
</form>

來源

2016-06-27 06:57:36 Rayon

總是讓我感到驚訝的人如何幫助的是關於計算器！非常感謝你的幫助！ – Thor

@TonyStark，我很高興它幫助隊友！ _Happy Coding_ – Rayon

var firstNumber = document.getElementById("txtFirstNumber").value; 
       var secondNumber = document.getElementById("txtSecondNumber").value;

使用價值沒有的valueOf

來源

2016-06-27 06:57:41

非常感謝您的幫助！真的很感激它！ – Thor

使用.value代替.valueOf()

http://codepen.io/anthonyastige/pen/RRKmrz

var firstNumber = document.getElementById("txtFirstNumber").value 
var secondNumber = document.getElementById("txtSecondNumber").value

來源

2016-06-27 06:59:21

這個應用程序真棒！謝謝你指出！ – Thor

是的超級快速的小演示:)有很多像CodePen那樣的東西，這是我認爲的新的一個。 –

HTML5表單顯示[對象HTMLInputElement] [對象HTMLInputElement]而不是實際結果添加兩個數字

回答

相關問題