动态更新价格

Question

我需要一个我不知道如何实现的JavaScript函数的帮助。

我需要为一个学校项目建立一个商店，我需要在添加/删除数量时动态更新价格。

这里有一张商店的图片，+/-按钮工作正常，我只需要在add按钮中更新价格。

我试着编写了一个函数，它的价格低于产品的名称，并乘以数量框中的值，但它不起作用。

<button class="buttonshad buttonstyling bg-primary text-light mx-5">Add <a id="changingprice">$6.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>

​