javascript - 如何使用DOM生成小计金额

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

我输入的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输入时，我什么也没得到，任何帮助将不胜感激。

最佳答案

您需要对HTML和JS文件进行一些更改。
首先，您可以做一些更“泛型”的操作，以便可以在每个input和button上重用它。

HTML：

<section id="shopping-cart">
    <div class="shopping-cart">
        <!-- <div class="title">
            Online Store
        </div> -->
        <div class="title">
            <ul>
                <li>Online Store</li>
                <li>Quantity</li>
                <li>Price</li>
                <li>Subtotal</li>
            </ul>
        </div>

        <!-- Product 1 -->
        <div class="item">
            <div class="buttons">
                <span class="delete-btn"></span>
                <span class="like-btn"></span>
            </div>

            <div class="image">
                <img src="/img/shop/cup.webp" alt="#">
            </div>

            <div class="description">
                <span>Cyberpunk 2077</span>
                <span>Coffee Mug</span>
                <span>Multi-color</span>
            </div>

            <div class="quantity">
                <button onclick="Input_ChangeValue(this, '-');" class="minus-btn">
                    <img src="/img/shop/minus-btn.png" alt="#">
                </button> <!-- Check the parameter values! -->
                <input id="valueTest1" type="text" value="0" data-price="10.99" onchange="calculateSubTotal(this);"> <!-- Calculate when the user inputs value -->
                <button onclick="Input_ChangeValue(this, '+');" class="plus-btn">
                    <img src="/img/shop/plus-btn.png" alt="#">
                </button> <!-- Check the parameter values! -->
            </div>

            <div id="itemPrice1" class="total-price">£10.99</div>
            <div id="itemTotal1" class="subtotal-price">£0.00</div>
        </div>
        <!-- Product 2 -->
        <div class="item">
            <div class="buttons">
                <span class="delete-btn"></span>
                <span class="like-btn"></span>
            </div>

            <div class="image">
                <img src="/img/shop/t-shirt.jpg" alt="#">
            </div>

            <div class="description">
                <span>Cyberpunk 2077</span>
                <span>T-Shirt</span>
                <span>Multi-color</span>
            </div>

            <div class="quantity">
                <button onclick="Input_ChangeValue(this, '-');" class="minus-btn">
                    <img src="/img/shop/minus-btn.png" alt="#">
                </button>
                <input id="valueTest2" type="text" value="0" data-price="15.99" onchange="calculateSubTotal(this);">
                <button onclick="Input_ChangeValue(this, '+');" class="plus-btn">
                    <img src="/img/shop/plus-btn.png" alt="#">
                </button>
            </div>

            <div id="itemPrice2" class="total-price">£<span>15.99</span></div>
            <div id="itemTotal2" class="subtotal-price">£<span>0.00</span></div>
        </div>

        <!-- Product 3 -->
        <div class="item">
            <div class="buttons">
                <span class="delete-btn"></span>
                <span class="like-btn"></span>
            </div>

            <div class="image">
                <img src="/img/shop/jacket1.jpg" alt="#">
            </div>

            <div class="description">
                <span>Cyberpunk 2077</span>
                <span>Womens Jacket</span>
                <span>Dark</span>
            </div>

            <div class="quantity">
                <button onclick="Input_ChangeValue(this, '-');" class="minus-btn">
                    <img src="/img/shop/minus-btn.png" alt="#">
                </button>
                <input type="text" id="valueTest3" value="0" data-price="24.99" onchange="calculateSubTotal(this);">
                <button onclick="Input_ChangeValue(this, '+');" class="plus-btn">
                    <img src="/img/shop/plus-btn.png" alt="#">
                </button>
            </div>

            <div id="itemPrice3" class="total-price">£<span>24.99</span></div>
            <div id="itemTotal3" class="subtotal-price">£<span>0.00</span></div>
        </div>
    </div>
</section>

JS：

function Input_ChangeValue(trigger, operation) {
  let inputChange = trigger.parentElement.querySelector("input");

  if (inputChange != null) {
    let actualValue = parseInt(inputChange.value);
    let nextValue = 0;

    switch (operation) {
      case "-":
        nextValue = actualValue - 1;
        break;
      case "+":
        nextValue = actualValue + 1;
        break;
    }

    if (nextValue <= 0) nextValue = 0; //don't allow negative numbers

    inputChange.value = nextValue;

    calculateSubTotal(inputChange);
  }
}

function calculateSubTotal(inputElement) {

  let subTotalDiv = inputElement.parentElement.parentElement.querySelector(".subtotal-price");

  if (inputElement != null && subTotalDiv != null) {
    //input found
    let qty = parseFloat(inputElement.value);
    let price = parseFloat(inputElement.getAttribute("data-price"));
    let subtotal = qty * price;

    //for debugging
    console.log(subtotal);
    subTotalDiv.innerHTML = `£${subtotal}`;
  }
}

仍然有一些验证应该检查，例如input仅接受数字，或者Subtotal列仅显示前两位小数。

祝好运！

关于javascript - 如何使用DOM生成小计金额，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60082898/