getElementById Не работает Возвращает NULL

Question

Я пытаюсь вывести динамическое значение страницы как JS VAR. Он возвращает NaN. Не знаю, почему.

function calculate(inputString) { 

var tendered=inputString; 
var curTotal=document.getElementById("total2"); 


x=tendered-curTotal; 
y=(Math.round(x * 100)/100).toFixed(2); 
if (y > 0) $(".submit").show(); 
if (y < 0) { 
    y="<font color='red'>Customer Still OWES: ".concat(y.replace('-','')).concat("</font>"); 
    $(".submit").hide(); 
} 
$('#change').html(y); 
document.getElementById('changeowed').value = y; 

}

Функция называется OnKeyUp ввода суммы подал.

HTML:

<div class="overlay"> 
<div class="border"> 
    <div class="cashform"> 
    <center> 
    <h1>Cash Payment</h1><br> 
    <form name="cash" action="sale.php" method="post"> 
    <h2>Amount Due: <font color="green"><b><div id="total2"></div></b></font></h2> 
    <h2>Amount Tendered: <input type="text" id="tendered" name="tendered" size="10" onkeyup="calculate(this.value)"></h2> 
    <h2>Change Owed<font color="green"><b><div id="change"></div></b></font></h2> 
    <br><br><br> 
    <input type="hidden" name="action" value="cash" /> 
    <input type="hidden" name="total" value="<?php echo $total; ?>" /> 
    <input type="hidden" id="changeowed" name="changeowed" /> 
    <input type="hidden" name="sid" value="<?php echo $sid; ?>" /> 
    <input type="submit" name="submit" value="Submit" class="submit"> || <input type="button" value="Cancel" class="cancel"> 
    </form> 
    </center> 
    </div> 
</div> 

Я попытался с JS выше и ниже HTML.

Я говорю, что значение (элемент) является динамическим, поскольку оно изменяется на основе транзакции (страница не перезагружается при сканировании элементов в продажу или удаление предметов из продажи). Добавление или удаление элементов в или из продажи вызывает функцию JS POST.

Answer 1

document.getElementById("total2") возвращает объект DOM. Таким образом, curTotal является объектом.

Следовательно, tendered - curTotal - это строка минус объект, который дает NaN. Строка может быть принудительно введена в число, но объект DOM определенно не может.

Возможно, вы хотели сделать document.getElementById("total2").value (предполагая, что #total2 - это элемент ввода), который сделал бы tendered - curTotal строкой минус строка, которая с большей вероятностью будет успешной.

(В качестве лучшей практики, вы должны преобразовать числовой ввод в число, например, parseInt(inputString, 10) или parseFloat(inputString, 10).)