如何使用 vanilla 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">.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

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">.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>

Answer 2

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">.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>

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

How to update dynamic price based on quantity using vanilla JavaScript?

javascript

dynamic

count

return-value