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

【问题标题】：Attempting to calculate cost when button is clicked - value not updating单击按钮时尝试计算成本 - 值未更新
【发布时间】：2020-06-30 10:36:41
【问题描述】：

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

orderQuantity 的纯 JavaScript - innerHTML 不更新
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>

谢谢。

【问题讨论】：

计算应该在update() 函数中进行，否则它将总是更新已经计算好的旧值
谢谢 - 你是对的。知道很简单哈哈！感谢您的帮助。

标签： javascript html css

【解决方案1】：

您应该在函数内移动变量。变量只初始化了一次，并没有随着文本框的值的变化而更新，所以当你点击更新时你不会得到任何值。

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>

【讨论】：

很高兴为您提供帮助：D

【解决方案2】：

我同意将变量放入函数中。您可以通过将lets 替换为consts、使用parseInt() 简写+ 并使用element.textContent 而不是element.innerHTML 来清理代码并使其更安全。

document.getElementById("order-update").addEventListener("click", update);

function update() {
    const orderQuantity = +document.getElementById("order-stepper").value;
    const orderText = document.getElementById("order-value");
    const orderValue = 2.50;
    const orderAmount = orderValue * orderQuantity;
    orderText.textContent = ("Total cost: £" + orderAmount);
}

另外，如果你在head中导入JS文件，请确保defer它不会破坏你的监听器。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="app.css">
    <script src="app.js" defer></script>
</head>

【讨论】：