parseFloat des Eingabewerts gibt NaN zurück

Ich versuche, ein Skript zu schreiben, das dynamisch eine Summe aus 4 Eingaben berechnet, die vom Benutzer bearbeitet werden können.parseFloat des Eingabewerts gibt NaN zurück

Ich habe einige Probleme, wenn ich parseFloat auf meine Eingabewerte verwende. Sie kommen als NaN zurück.

Bisher habe ich versucht, mit parseInt statt parseFloat, verwendet .val() statt .value, mit name statt id Attribute Attribute und ein paar andere Dinge, die ich nicht Hand erinnern ab.

Ich habe keine anderen Antworten auf ähnliche Fragen gesehen, die für mich schon funktioniert haben, also wenn es dir nichts ausmacht, einen Blick auf meinen Code zu werfen, um zu sehen, wo ich vielleicht falsch gelaufen bin es. Vielen Dank!

<!DOCTYPE HTML> 
 

 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Calc</title> 
 
<style> 
 
    
 
</style> 
 
</head> 
 

 
<body> 
 
    <table width = "250" border="1"> 
 
     <tr> 
 
     <th align="left">A</th> 
 
     <th align="left">B</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Rent</td> 
 
     <td id="rent" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Food</td> 
 
     <td id="food" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Entertainment</td> 
 
     <td id="ent" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Transportation</td> 
 
     <td id="trans" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <th align="left">Total</th> 
 
     <td id="total" align="right"></td> 
 
     </tr> 
 
    </table> 
 
    <script> 
 
     function calc() { 
 
     var w = parseFloat(document.getElementById("rent").value); 
 
     var x = parseFloat(document.getElementById("food").value); 
 
     var y = parseFloat(document.getElementById("ent").value); 
 
     var z = parseFloat(document.getElementById("trans").value); 
 
      
 
     document.getElementById("total").innerHTML=w+x+y+z; 
 
     } 
 
    </script> 
 
</body> 
 
</html>

Quelle

2016-11-21 Krehem

Warum ist die ID auf dem TD und nicht der Eingang? – epascarello

Sie wurden Ihre Zellen (<td> Tags) id Attribute, anstatt Ihre tatsächlichen input Felder geben.

Das Verschieben der id Attribute zu den input Elementen löst das Problem.

Zusätzlich, da Sie sind der calc Funktion wiederholt aufrufen gehen, würde es mehr Sinn machen, nur einmal das Dokument zu scannen, um die Verweise auf die Elemente, um Sie immer und immer wieder gehen zu wollen, verwenden.

Schließlich ist es am besten, Ihre HTML-Elemente nicht mit den JavaScript-Funktionen zu verknüpfen, die ausgelöst werden sollen, wenn ein Ereignis im HTML-Code selbst auftritt. Sie können in meinem Code-Ausschnitt sehen, wie ich das aus dem HTML entfernt habe und es in das JavaScript eingefügt habe.

// Wait until the DOM is fully loaded 
 
window.addEventListener("DOMContentLoaded", function(){ 
 
    
 
    // Declare and initialze variable references to needed elements: 
 
    var wElement = document.getElementById("rent"); 
 
    var xElement = document.getElementById("food"); 
 
    var yElement = document.getElementById("ent"); 
 
    var zElement = document.getElementById("trans"); 
 

 
    // Wire elements to event handlers: 
 
    wElement.addEventListener("change", calc); 
 
    xElement.addEventListener("change", calc); 
 
    yElement.addEventListener("change", calc); 
 
    zElement.addEventListener("change", calc); 
 

 
    // Event handler: 
 
    function calc() { 
 
     var w = parseFloat(wElement.value); 
 
     var x = parseFloat(xElement.value); 
 
     var y = parseFloat(yElement.value); 
 
     var z = parseFloat(zElement.value); 
 
      
 
     document.getElementById("total").textContent = w + x + y + z; 
 
    } 
 
});

<table width = "250" border="1"> 
 
     <tr> 
 
     <th align="left">A</th> 
 
     <th align="left">B</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Rent</td> 
 
     <td align="right"> 
 
      <input type="text" id="rent" size="7" value="0"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Food</td> 
 
     <td align="right"> 
 
      <input type="text" id="food" size="7" value="0"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Entertainment</td> 
 
     <td align="right"> 
 
      <input type="text" id="ent" size="7" value="0"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Transportation</td> 
 
     <td align="right"> 
 
      <input type="text" id="trans" size="7" value="0"></td> 
 
     </tr> 
 
     <tr> 
 
     <th align="left">Total</th> 
 
     <td id="total" align="right"></td> 
 
     </tr> 
 
    </table>

Quelle

2016-11-21 17:59:09

Sie versuchen, den Wert von td ‚s zu erhalten, wenn Sie die Eingänge innerhalb dieser td s Ziel sollte, so dass Sie verwenden:

var w = parseFloat(document.querySelector("#rent input").value); 
var x = parseFloat(document.querySelector("#food input").value); 
var y = parseFloat(document.querySelector("#ent input").value); 
var z = parseFloat(document.querySelector("#trans input").value);

Hope this hilft.

function calc() { 
 
    var w = parseFloat(document.querySelector("#rent input").value); 
 
    var x = parseFloat(document.querySelector("#food input").value); 
 
    var y = parseFloat(document.querySelector("#ent input").value); 
 
    var z = parseFloat(document.querySelector("#trans input").value); 
 

 
    document.getElementById("total").innerHTML=w+x+y+z; 
 
}

<!DOCTYPE HTML> 
 

 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Calc</title> 
 
    <style> 
 

 
    </style> 
 
    </head> 
 

 
    <body> 
 
    <table width = "250" border="1"> 
 
     <tr> 
 
     <th align="left">A</th> 
 
     <th align="left">B</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Rent</td> 
 
     <td id="rent" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Food</td> 
 
     <td id="food" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Entertainment</td> 
 
     <td id="ent" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Transportation</td> 
 
     <td id="trans" align="right"> 
 
      <input type="text" size="7" value="0" onchange="calc()"></td> 
 
     </tr> 
 
     <tr> 
 
     <th align="left">Total</th> 
 
     <td id="total" align="right"></td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 
</html>

Quelle

2016-11-21 18:00:36

parseFloat des Eingabewerts gibt NaN zurück

Antwort

Verwandte Themen