parseFloat ввода значения возвращает NaN

Я пытаюсь написать сценарий, который динамически вычисляет сумму из 4 входов, которые редактируются пользователем.parseFloat ввода значения возвращает NaN

У меня возникли проблемы, когда я использую parseFloat на моих входных значениях. Они возвращаются как NaN.

До сих пор, я попытался с помощью parseInt вместо parseFloat, используется .val() вместо .value, используя name атрибутов вместо id атрибутов, и несколько других вещей, которые я не могу вспомнить от руки.

Я не видел других ответов на подобные вопросы, которые работали для меня еще, поэтому, если бы вы не прочь взглянуть на мой код, чтобы увидеть, где я, возможно, ошибся, я был бы признателен Это. Благодаря!

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

источник

2016-11-21 Krehem

Почему идентификатор на TD, а не на входе? – epascarello

Вы давали свои клетки (<td> тегов) id атрибуты, а не вашим фактическим input полеев.

Перемещение атрибутов id в элементы input решает проблему.

Кроме того, поскольку вы собираетесь повторно называть функцию calc, было бы разумнее просто отсканировать документ один раз, чтобы получить ссылки на элементы, которые вы собираетесь использовать снова и снова.

И, наконец, лучше не подключать элементы HTML к функциям JavaScript, которые должны срабатывать, когда событие происходит в самом HTML. В моем фрагменте кода вы можете увидеть, как я удалил это из HTML и поместил его в 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>

источник

2016-11-21 17:59:09

Вы пытаетесь получить значение td-х, когда вы должны быть нацелены на входы внутри этих td с, так что вы можете использовать:

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

Надеется, что это помогает.

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>

источник

2016-11-21 18:00:36

parseFloat ввода значения возвращает NaN

ответ

Смежные вопросы