如何使用DOM产生小计金额

Question

我正在尝试为一个小的购物车项目生成一个简单的小计金额，似乎该函数看不到输入值

我的输入HTML是：<input id="valueTest1" type="text" value="0" data-price="10.99">

而且我只需要数据价格来*输入的值，然后显示在我的小计HTML中（如下所示）

<div id="itemTotal1" class="subtotal-price">£0.00</div>

这是我的职能。.

function calculateSubTotal() {
    let subtotal = 0;
    for (i = 1; i <= itemTotal1; i++) {

        itemID = document.getElementById('valueTest1');
        if (typeof itemID === 'undefined' || itemID === null) {
            alert("No such item - " + "valueTest1");
        } else {
            subtotal = subtotal + parseFloat(valueTest1.value) * parseFloat(itemID.getAttribute("data-price"));
        }

    }
    console.log(valueTest1.value)
    document.getElementById('itemTotal1').innerHTML = "£" + subtotal;
}

我可以在函数外部进行console.log输入（valueTest1.value），它显示为0，但是当我尝试在函数中进行console.log输入时，我什么也没有得到，任何帮助将不胜感激。

Answer 1

您混合了变量和选择器。

通过document.getElementById('valueTest1')找到的输入在名为itemID的变量中，因此，不是：

subtotal = subtotal + parseFloat(valueTest1.value) * parseFloat(itemID.getAttribute("data-price"));

您应该拥有：

subtotal = subtotal + parseFloat(itemID.value) * parseFloat(itemID.getAttribute("data-price"));

您应该将控制台更改为：console.log(itemID.value)