Question

我正在尝试用 JavaScript 创建购物车。当我点击按钮时，商品的价格应该根据我点击按钮的次数而增加。我已经尝试了下面的代码，但它不起作用。问题是，点击几次后，乘法是这样的：假设初始价格=49
49 x 1
49 x 2
94 x 3
282 x 4（应该是 49 x 4）；我已经修改了代码，它在 console.log() 中工作正常，但是如果我将变量 newPrice 分配给 document.getElementById().innerHTML

会给出不同的结果




let counter=0;
document.getElementById("inc").addEventListener("click",
function(){
  counter++;
  const price =document.getElementById("discount").innerHTML;
  const newPrice = counter * price ;
  const  finalPrice = newPrice;
  document.getElementById("discount").innerHTML=finalPrice;
  
})
<b class="mb-1" >price:$<span id="discount">49.20</span></b> 
<button type="button" class="roundbutton" id="inc">+</button>

Answer 1

我认为你想在做乘法之前先解析Float。

let counter=0;
document.getElementById("inc").addEventListener("click",function(){
counter++
const priceElement = document.getElementById("discount")
const price = parseFloat(priceElement.innerHTML);
const newPrice = (price * counter).toFixed(2);
console.log(newPrice)
// store your newPrice elsewhere or you cant maintain your 49 * counter
// priceElement.innerHTML = newPrice
})

<b class="mb-1" >price:$<span id="discount">49.20</span></b> 
<button type="button" class="roundbutton" id="inc">+</button>

Answer 2

就像评论中提到的那样，问题中包含的代码按预期执行。您正在更新 document.getElementById("discount").innerHTML 的值。您需要将价格/单位存储在某处。

包括一个演示它的片段。

let counter = 1
const unitPrice = 49.20
document.getElementById("inc").addEventListener("click",function() {
counter++
const price = document.getElementById("discount")
price.innerHTML = (unitPrice * counter).toFixed(2)
})

<b class="mb-1" >price:$<span id="discount">49.20</span></b>
<button type="button" class="roundbutton" id="inc">+</button>

Answer 3

我觉得这个 const newprice = document.getElementById("discount").innerHTML *=counter;

应该是 const newprice = document.getElementById("discount").innerHTML +=counter;

注意 + 之前的 * 而不是 =counter。加号是加星是倍增。

Javascript const 变量在与另一个变量相乘后发生变化

3 个答案: