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

您没有将字符串元素 id 值传递给您的函数:

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

您应该始终打开浏览器开发者控制台，以便检查错误。

另外，正如一些评论所指出的，它是 getElementById()，其中“Element”为单数。