HTML5フォーム表示[オブジェクトHTMLInputElement] 2つの数字の実際の結果ではなく[オブジェクトHTMLInputElement]

私はhtml5とjavascriptが新しく、html5とjavascriptを使用して簡単なフォームを作成しています。 netbeansでrunを押すと、フォームは期待どおりにchromoで表示されますが、2つの数字を入力してaddを押すと、3を結果columeに表示する代わりに、[object HTMLInputElement][object HTMLInputElement]が表示されます。HTML5フォーム表示[オブジェクトHTMLInputElement] 2つの数字の実際の結果ではなく[オブジェクト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） –

使用Object.prototype.valueOf()方法はElement.valueはStringを返すため

またNumberにinput-valueをキャストした後、操作（DOMElementは、あなたのケースでは）指定されたオブジェクトのプリミティブな値を返すようにvalueプロパティ+は、それらの値を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

私は常に役立つ人々はstackoverflowの上にあるどのように驚いています！手伝ってくれてありがとう！ – Thor

@トニースターク、私はそれが仲間を助けてうれしいです！ _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のようなものがたくさんあります。それは私が考えている新しいものの1つです。 –

HTML5フォーム表示[オブジェクトHTMLInputElement] 2つの数字の実際の結果ではなく[オブジェクトHTMLInputElement]

答えて

関連する問題