issue to sum fields

Question

Это базовый код html/javascript, но у меня возникают проблемы с получением суммы всех полей. (50 полей в оригинальном проекте, но теперь я просто оставить 5)

Если поле пустым, он просто должен игнорировать, и добавить только те, с заполненными полями.

HTML код:

value1:<input type="text" id="total_1" ><br> 
value2:<input type="text" id="total_2" ><br> 
value3:<input type="text" id="total_3" ><br> 
value4:<input type="text" id="total_4" ><br> 
value5:<input type="text" id="total_5" ><br> 
total:<input type="text" id="totalresult" > 
<button type="button" onclick="getTotal(); return false;">Get total</button> 

Javascript:

function getTotal() { 
var sum; 
for (i = 1; i <=5 ; i++) { 
    var total = document.getElementById('total_' + i.toString()).value; 
    if (total != '') { 
     sum = parseFloat(total) + sum; 
     document.getElementById('totalresult').value = sum; 
    } 

    } 

} 

Я не знаю, почему мой код не работает.

Вот мой Fiddle

Answer 1

Вы должны сделать две вещи. 1, инициализируйте сумму до нуля. 2, проверьте входные значения, чтобы не быть числом.

function getTotal() { 
    var sum = 0; 
    for (i = 1; i <= 5; i++) { 
     var total = document.getElementById('total_' + i).value; 
     if (!isNaN(parseFloat(total))) sum = parseFloat(total) + sum; 
     document.getElementById('totalresult').value = sum; 
    } 
} 

jsFiddle example

Answer 2

Первый раз, когда ваш код работает, сумма будет неопределенным.

Initialize

var sum = 0; 

Кроме того, чтобы заставить его работать в скрипку, вам необходимо изменить

OnLoad слева сверху 'No Wrap - в'

Answer 3

Я не знай, почему твоя скрипка не может понять, что делает getTotal глобальным. Но ваша главная проблема заключается в том, что сумма не определена как начало. Это приведет к NaN (не число):

var sum; 

sum = 1 + sum; // NaN 

....

sum = 1 + undefined; // NaN 

sum = 1 + NaN; // NaN 

Demo at jsbin.com

Вы должны установить сумму, равную нулю в первой:

var sum = 0; 
for (...) { ... 

Working demo as adrianp pointed out: It would probably be more clear if you uploaded the working code to jsbin.

Answer 4

Вы не указали переменную суммы, поэтому javascript принимает это как NaN, что означает «Не номер». Вам необходимо инициализировать его, чтобы установить его правильно.

function getTotal() { 
      var sum = 0; 
    for (i = 1; i <=5 ; i++) { 
    var total = document.getElementById('total_' + i.toString()).value; 
if(isNaN(total) || total.indexOf(' ') == 1) { 
    alert("Please type a number"); 
    document.getElementById("totalresult").value = "I cant sum alphanumerics"; 
    return false; 
} 

if (total != '') { 
    sum = parseFloat(total) + sum; 
    document.getElementById('totalresult').value = sum; 
} 

}}

FIDDLE

Answer 5

Используйте IsNumeric функцию, чтобы проверить, если поле ввода имеет действительное число.См: Validate decimal numbers in JavaScript - IsNumeric()

Вот мое предложение, чтобы улучшить код в ваш цикл:

var elementValue = document.getElementById('total_' + i).value 
IsNumeric(elementValue) ? elementValue : elementValue = 0;