Расчет Javascript динамически без кнопки отправки

Question

Я вытаскиваю элемент из базы данных, беря стоимость и определенное пользователем количество и отображая общее количество. Моя цель состоит в том, чтобы иметь 25 + рядов расходных материалов, которые пользователь может вычислить и добавить общее количество в конце. У меня возникли проблемы с вычислением стоимости * количества без обновления страницы и потери всех других данных. Я довольно новичок в javascript, и я не понимаю, почему это не работает для меня.

<script type="text/javascript"> 
function updatesum(cost, quant, tot) { 
    var qty = document.getElementsByid(quant).value; 
    var price = document.getElementsByid(cost).value; 
    document.getElementById(tot).value = (price * qty); 

} 
</script> 

<cfoutput> 
<cfform> 
    <table> 
     <tr> 
     <td colspan=3>Supplies</td> 
     </tr> 
     <tr> 
     <td>Date</td> 
     <td>Supply</td> 
     <td>Cost</td> 
     <td>Quantity</td> 
     <td>Total</td> 
     </tr> 
     <tr> 
     <td><cfinput type="datefield" name="date_01" id="date_01"></td> 
     <td><cfselect name="supply_01" onChange=""> 
       <option value="0"></option> 
      <cfloop query="supplies"> 
       <option value="#supplies.id#">#supplies.supply#</option> 
      </cfloop> 
      </cfselect></td> 
     <td><cfinput type="integer" name="unitCost_01" id="unitCost_01" value="" onChange="updatesum(unitCost_01, quantity_01, total_01"></td> 
     <td><cfinput type="integer" name="quantity_01" id="quantity_01" onChange="updatesum(unitCost_01, quantity_01, total_01)"></td> 
     <td><cfinput type="integer" readonly="yes" name="total_01" id="total_01" value=""></td> 
     </tr> 
    </table> 
</cfform> 
</cfoutput> 

Answer 1

Вы не передавая значения строки идентификатора элемента вашей функции:

<td><cfinput type="integer" name="unitCost_01" id="unitCost_01" value="" onChange="updatesum('unitCost_01', 'quantity_01', 'total_01'"></td> 

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

Также, как отмечалось в некоторых комментариях, это getElementById(), с «Элементом» единственного числа.