如何使用香草 JavaScript 根据数量更新动态价格？

Question

我正在尝试使用 javascript 根据数量更新价格值。我已经对其进行了硬编码，下面是我的代码。 我不确定如何根据数量动态更新价格。 谁能指导我？

例如，当 77.89 X 计数值增加到 2 时，实际结果应该是 155.78，

 var count = 1; var countprice = 100; var countEl = document.getElementById("num-count"); const a = 2; const x = countprice * a; document.getElementById("priceValueCount").innerHTML = x; function addCount() { if (count < 4) { count++; countEl.value = count; } } function minusCount() { if (count > 1) { count--; countEl.value = count; } }

 .num-minus, .num-add { margin-top: 1px; display: inline-block; position: relative; }.num-minus:before, .num-add:before { content: ""; position: absolute; top: 50%; left: 50%; margin-left: -5px; width: 10px; border-top: 2px solid #3A3E3D; margin-top: -1px; }.num-add::after { content: ""; position: absolute; left: 50%; top: 50%; margin-top: -5px; height: 10px; border-left: 2px solid #3A3E3D; margin-left: -1px; }

 <div class="price-value" id="priceExtra">$77.89</div> <span class="num-minus" onclick="minusCount()"></span> <input type="text" class="num-count" id="num-count" value="1" data-max="4" data-min="1"> <span class="num-add" onclick="addCount()"></span> <div class="price-value" id="priceValueCount"></div>

Answer 1

 var count = 1; var countprice = 77.89; var countEl = document.getElementById("num-count"); var priceEl = document.getElementById("priceValueCount"); priceEl.innerHTML = countprice; function addCount() { if (count < 4) { count++; countEl.value = count; const a = countEl.value; const x = countprice * a; priceEl.innerHTML = x; } } function minusCount() { if (count > 1) { count--; countEl.value = count; const a = countEl.value; const x = countprice * a; document.getElementById("priceValueCount").innerHTML = x; } }

 .num-add, .num-minus { cursor: pointer; }

 <div class="price-value" id="priceExtra">$77.89</div> <span class="num-minus" onclick="minusCount()">-</span> <input type="text" class="num-count" id="num-count" value="1" data-max="4" data-min="1"> <span class="num-add" onclick="addCount()">+</span> <div class="price-value" id="priceValueCount">0</div>

Answer 2

1）您可以使用类型number的input

<input type="number" max="4" min="0" step="1" class="num-count" id="num-count" value="1">

2）您可以使用change事件，您可以将价格更新为

const total = countprice * e.target.value + priceExtra; // If you want to add extra price here else remove the priceExtra
document.getElementById( "priceValueCount" ).textContent = total;

 var count = 1; var countprice = 100; var countEl = document.getElementById( "num-count" ); const priceExtra = 77.89; const input = document.querySelector( "#num-count" ); input.addEventListener( "change", e => { const total = countprice * e.target.value + priceExtra; document.getElementById( "priceValueCount" ).textContent = total; } )

 <div class="price-value" id="priceExtra">$77.89</div> <input type="number" max="4" min="0" step="1" class="num-count" id="num-count" value="1" data-max="4" data-min="1"> <div class="price-value" id="priceValueCount"></div>