动态更新价格

Question

我需要有关 JavaScript 函数的帮助，但我不知道如何实现。
我需要为一个学校项目做一个商店，我需要在添加/删除数量时动态更新价格。
这是商店的图片，+/- 按钮工作正常，我只需要在添加按钮中更新价格。
我尝试编写一个函数，将价格低于产品名称并将其乘以数量框中的值，但它不起作用。

<button class="buttonshad buttonstyling bg-primary text-light mx-5">Add <a id="changingprice">.99</a></button>

这是我的 JavaScript 增加和减少函数：

  function increaseValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
  }

  function decreaseValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value < 1 ? value = 1 : '';
    value--;
    document.getElementById('number').value = value;
  }

基本上我需要的是在添加/删除数量时更新按钮中的价格！

Answer 1

这里有一个例子可以激发你的灵感。

let basePrice = 6.99;
document.querySelector("#qty").addEventListener("change", function(){
  document.querySelector("#changingprice span").innerText = (basePrice * this.value).toFixed(2)
})

#qty{
  width: 3em;
}

<input type="number" id="qty" min="0" value="0"/>
<button id="changingprice" class="buttonshad buttonstyling bg-primary text-light mx-5">Add $<span>0.00</span></button>

动态更新价格

dynamically update the price

javascript

bootstrap-5