HTML5 Formularanzeige [Objekt HTMLInputElement] [Objekt HTMLInputElement] anstelle des tatsächlichen Ergebnisses der Addition von zwei Zahlen

Ich bin neu zu HTML5 und Javascript und schreibt ein einfaches Formular mit HTML5 und Javascript. Wenn ich in NetBeans Run drücke, erscheint das Formular in Chromo wie erwartet, aber wenn ich zwei Zahlen gebe und auf Hinzufügen klicke, statt 3 in der Ergebnisspalte anzuzeigen, wird stattdessen [object HTMLInputElement][object HTMLInputElement] angezeigt.HTML5 Formularanzeige [Objekt HTMLInputElement] [Objekt HTMLInputElement] anstelle des tatsächlichen Ergebnisses der Addition von zwei Zahlen

Könnte mir bitte jemand sagen, warum dies geschieht? Wie kann ich diesen Fehler beheben?

<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>

Quelle

2016-06-27 Thor

[CodePen des Codes zu spielen] (http://codepen.io/anthonyastige/pen/VjPOeR) –

Verwenden value Eigenschaft als Object.prototype.valueOf() Methode des Grundwert des angegebenen Objekts zurück (In Ihrem Fall ein DOMElement)

Auch input-value-Number gegossen und dann manipulieren, weil Element.value ein String zurück und + verketten diese Werte als adding sie!

Unary plus (+), Die unary plus operator voran seinen Operanden und wertet seine Operanden aber Versuche, es in ein zu number umwandelt, wenn es nicht schon ist.

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>

Quelle

2016-06-27 06:57:36 Rayon

Ich bin erstaunt immer, wie hilfreich die Menschen auf Stackoverflow sind! Vielen Dank für die Hilfe !! – Thor

@TonyStark, ich bin froh, dass es Kumpel geholfen hat! _Happy Coding_ – Rayon

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

Nutzungswert nicht valueOf

Quelle

2016-06-27 06:57:41

Vielen Dank für Ihre Hilfe! Schätze es wirklich! – Thor

Verwenden .value anstelle von .valueOf()

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

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

Quelle

2016-06-27 06:59:21

diese Anwendung ist großartig! Danke für das Aufzeigen! – Thor

Yeah super schnell für kleine Demos :) Es gibt eine Reihe von Dingen wie CodePen da draußen, es ist einer der neuen, die ich denke. –

HTML5 Formularanzeige [Objekt HTMLInputElement] [Objekt HTMLInputElement] anstelle des tatsächlichen Ergebnisses der Addition von zwei Zahlen

Antwort

Verwandte Themen