2016-09-24 18 views
-3

Hallo, ich bin neu in Javascript und ich versuche, einen einfachen Rechner mit HTML und js zu machen. Jedoch habe ich auf ein Problem gestoßen, wo ich den Knopf drücke, um die Antwort zu berechnen, und es wird nichts tun. Ich habe es in einer Online-Idee versucht und es gab mir nur die falsche Antwort. Hier ist der Code kann jemand helfen. thanks--Javascript Rechner funktioniert nicht richtig

<!DOCTYPE html> 
<html> 
<head> 
    <title>calculator</title> 
    <script type="text/javascript"> 
    document.getElementById("equals").onclick = function() { 
     var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_1').value); 
     document.getElementById('answer').innerHTML = answer; 
    }; 
    </script> 
</head> 
<body> 
      <input type="text" name="number_1" id = "number_1"> 
      <p>+</p> 
      <input type="text" name="number_2" id = "number_2"> 
      <input type="submit" name="equals" id = "equals" value="="> 
      <p id = "answer"></p> 
</body> 
</html> 
+0

Was ist Ihre Konsole sagen? – baranskistad

+0

Ihr eigener Code Debugging ist auch Teil der Programmierung –

+0

nicht gesetzt Eigenschaft ‚Onclick‘ von null – charlie2104

Antwort

0

Du fügt den Wert aus dem gleichen Eingang zweimal, und Sie haben den Event-Handler einstellen, nachdem die Schaltfläche erstellt wird.

<body> 
    <input type="text" name="number_1" id = "number_1"> 
    <p>+</p> 
    <input type="text" name="number_2" id = "number_2"> 
    <input type="submit" name="equals" id = "equals" value="="> 
    <p id = "answer"></p> 
    <script type="text/javascript"> 
    document.getElementById("equals").onclick = function() { 
     var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_1').value); 
     document.getElementById('answer').innerHTML = answer; 
    }; 
    </script> 
</body> 
+0

ok danke, aber das nicht behebt noch nicht die Tatsache, dass, wenn ich die Taste nichts drücken geschieht – charlie2104

0

Formen einschließlich onClick Bedingungen ohne GET/POST Methoden verwenden in der Regel button.

<input type="button" name="equals" id="equals" value="="> 

Ich vermute, dass Sie die gleichen Variablen zweimal hinzufügen?

0

Das Hauptproblem besteht darin, dass Sie das Ereignis click zu Element equals hinzufügen, aber in diesem Moment existiert Element equals nicht.

wickeln Ihre document.getElementById in window.onload Funktion javascript zu sagen: "Wenn alle das Dokument Finish zu laden, das Ereignis Klick auf Element hinzufügen, gleich"

try this:

window.onload = function() { 
     document.getElementById("equals").onclick = function() { 
      var answer = parseInt(document.getElementById('number_1').value, 10)+ parseInt(document.getElementById('number_2').value, 10); 
      document.getElementById('answer').innerHTML = answer; 
     }; 
    } 

Another wichtige Sache, die ich hinzugefügt haben, 10 bis Ihre parseInt, ist dies sicher zu stellen, dass die Umwandlung in eine Zahl in dezimal-Modus ist

„die parseInt() -Funktion eine Zeichenfolge analysiert und gibt eine ganze Zahl ist.

Der radix-Parameter wird verwendet, um anzugeben, welches Zahlensystem verwendet werden soll, z. B. eine Radix von 16 (hexadezimal) gibt an, dass die Zahl in der Zeichenfolge von einer Hexadezimalzahl zu einer Dezimalzahl analysiert werden soll.

Wenn der Parameter radix weggelassen wird, übernimmt JavaScript folgende:

Wenn die Zeichenfolge mit "0x" beginnt, die Radix 16 (hexadezimal) Wenn die Zeichenfolge mit "0" beginnt, ist die Radix 8 (oktal). Diese Funktion ist veraltet Wenn der String mit einem anderen Wert beginnt, ist die Radix 10 (dezimal)“

Quelle: parseInt use

0

ich es jetzt behoben hatte ich meinen Code in einer window.onload wickeln

<!DOCTYPE html> 
<html> 
<head> 
    <title>calculator</title> 
    <script type="text/javascript"> 
    window.onload = function(){ 
     document.getElementById("equals").onclick = function() { 
      var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_2').value); 
      document.getElementById('answer').innerHTML = answer; 
     }; 
    }; 
    </script> 
</head> 
<body> 
      <input type="text" name="number_1" id = "number_1"> 
      <p>+</p> 
      <input type="text" name="number_2" id = "number_2"> 
      <button id = "equals">=</button> 
      <p id = "answer"></p> 
</body> 
</html> 
Verwandte Themen