parseFloat des retours de valeur d'entrée NaN

J'essaye d'écrire un script qui calcule dynamiquement un total à partir de 4 entrées qui sont éditables par l'utilisateur.parseFloat des retours de valeur d'entrée NaN

Je rencontre des problèmes lorsque j'utilise parseFloat sur mes valeurs d'entrée. Ils reviennent comme NaN.

Jusqu'à présent, j'ai essayé d'utiliser parseInt au lieu de parseFloat, utilisé .val() au lieu de .value, en utilisant les attributs name au lieu de id attributs, et un couple d'autres choses, que je ne me souviens pas de la main.

Je n'ai pas vu d'autres réponses à des questions similaires, qui ont déjà fonctionné pour moi, donc si cela ne vous dérange pas de jeter un oeil à mon code pour voir où je me suis peut-être trompé, j'apprécierais il. Merci!

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

Source

2016-11-21 Krehem

Pourquoi l'id du TD et non l'entrée? – epascarello

Vous donniez vos cellules (<td> tags) id attributs, plutôt que vos input réels champs. Le déplacement des attributs id vers les éléments input résout le problème. En outre, puisque vous allez appeler la fonction calc à plusieurs reprises, il serait plus logique de simplement numériser le document une fois pour obtenir les références aux éléments que vous allez vouloir utiliser encore et encore. Enfin, il est préférable de ne pas accrocher vos éléments HTML aux fonctions JavaScript qui doivent être déclenchées lorsqu'un événement se produit dans le code HTML lui-même. Vous pouvez voir dans mon extrait de code comment j'ai supprimé cela du HTML et le mettre dans le JavaScript.

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

Source

2016-11-21 17:59:09

Vous essayez d'obtenir la valeur de td « s lorsque vous devez cibler les entrées à l'intérieur de ces td s, vous pouvez utiliser:

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

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>

Source

2016-11-21 18:00:36

parseFloat des retours de valeur d'entrée NaN

Répondre

Questions connexes