javascript - 如何使用 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

您需要对 HTML 和 JS 文件进行一些更改。 首先，您可以做一些更“通用”的事情，这样您就可以在每个输入和按钮上重用它。

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}`;
  }
}

您仍然应该检查一些验证，例如输入仅接受数字或小计列仅显示前两位小数。

祝你好运!