时间戳

首页 > 解决方案 > 单击按钮时尝试计算成本 - 值未更新

javascript - 单击按钮时尝试计算成本 - 值未更新

问题描述

我编写了一个简单的排序系统，您可以在其中从数字输入中“选择”一个整数，然后当您单击“更新”按钮时，它会更改其下方段落元素的内部文本。但是，我尝试了两种方法：

  1. orderQuantity 的纯 JavaScript - innerHTML 不更新
  2. orderQuantity 的 parseInt - 在 innerHTML 中返回 £NaN

请有人能指出我哪里出错了吗？

这是代码：

let orderQuantity = parseInt(document.getElementById("order-stepper").value);
let orderText = document.getElementById("order-value");
let orderValue = 2.50;
let orderAmount =  orderValue * orderQuantity;
let updateButton = document.getElementById("order-update");

function update() {
  orderText.innerHTML = ("Total cost: £" + orderAmount);
}

updateButton.addEventListener("click", update);
.order-stepper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-stepper label {
  font-size: 20px;
  margin: 30px 20px;
}

.order-stepper input {
  font-size: 18px;
  background-color: #f9f9f9;
  color: #999;
}

.order-price {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#order-value {
  font-size: 28px;
}

#order-update {
  height: 60px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  border: 3px solid #e2979c;
  border-radius: 5px;
  font-size: 2rem;
  font-weight: bold;
  background-color: #fff;
  cursor: pointer;
}

#order-update:hover {
  background-color: #e2979c;
}
<div class="order-stepper">
          <label for="quantity">Select your quantity</label>
          <input id="order-stepper" type="number" name="quantity" value="" max="3">
        </div>
        <button id="order-update" type="button" name="button">Update</button>
        <div class="order-price">
          <h2 id="order-value">Total cost: £0</h2>
        </div>

谢谢。

标签： javascripthtmlcss

解决方案

您应该在函数内移动变量。变量仅被初始化一次，并且不会随着文本框的变化值而更新，因此当您单击更新时不会获得任何值。

let updateButton = document.getElementById("order-update");

function update() {
    let orderQuantity = parseInt(document.getElementById("order-stepper").value);
    let orderText = document.getElementById("order-value");
    let orderValue = 2.50;
    let orderAmount =  orderValue * orderQuantity;

  orderText.innerHTML = ("Total cost: £" + orderAmount);
}

updateButton.addEventListener("click", update);
.order-stepper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-stepper label {
  font-size: 20px;
  margin: 30px 20px;
}

.order-stepper input {
  font-size: 18px;
  background-color: #f9f9f9;
  color: #999;
}

.order-price {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#order-value {
  font-size: 28px;
}

#order-update {
  height: 60px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  border: 3px solid #e2979c;
  border-radius: 5px;
  font-size: 2rem;
  font-weight: bold;
  background-color: #fff;
  cursor: pointer;
}

#order-update:hover {
  background-color: #e2979c;
}
<div class="order-stepper">
  <label for="quantity">Select your quantity</label>
  <input id="order-stepper" type="number" name="quantity" value="" max="3">
</div>
<button id="order-update" type="button" name="button">Update</button>
<div class="order-price">
  <h2 id="order-value">Total cost: £0</h2>
</div>

推荐阅读