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

【问题标题】：How to update dynamic price based on quantity using vanilla JavaScript?如何使用 vanilla JavaScript 根据数量更新动态价格？
【发布时间】：2021-11-26 11:42:37
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

您必须再次计算 x，然后再次设置 pricevaluecount 的值。这两个不会自动更新。所以基本上再做第 5 行和第 6 行

标签： javascript dynamic count return-value

【解决方案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>

【讨论】：

【解决方案2】：

1)你可以使用input类型的number

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

【讨论】：