时间戳

首页 > 解决方案 > 如何防止此函数多次修改变量？

javascript - 如何防止此函数多次修改变量？

问题描述

当一个复选框被标记时，我编写了这个函数来修改我的 HTML 标记的文本。

var price = 15

function checkPrice() {
  let extraCheese = document.getElementById("extraCheese");
  if (extraCheese.checked = true) {
    price += 5;
    // console.log(price)
    document.getElementById('pizzaPrice').innerHTML = `Current Price: $${price}.00`
  }
}
<input type="checkbox" value="extraCheese" onclick="checkPrice(this);" id="extraCheese" />
<label for="extraCheese"> Extra Cheese </label>

<h3 id="pizzaPrice"> Base Price: $15.00 </h3>

它按预期工作，并在当前价格上增加 5，但复选框保持选中状态，每次单击它时，价值再次增加 5。我应该怎么做才能让用户取消选中该框并将值降低到原来的值？

标签： javascripthtml

解决方案

您应该关注change复选框的事件，而不是click事件。然后，从事件本身，您可以获得元素的句柄，并使用它来检查元素当前是否checked存在。

此外，我建议将您的交互和演示逻辑分开。即，不要在您的 HTML 中声明事件处理程序，并且不要在您的 javascript 中包含太多的字符串格式化内容。保持手术，只需修改 HTML 中需要更改的特定部分——这将有助于将价格数字包装在<span>标签中，这样您就可以更改数字而无需在 javascript 中重复“基本价格：”部分. 当你的代码变大时，这种对细节的关注可以帮助你保持整洁。

var currentPriceElement = document.getElementById('currentPrice');

function getCurrentPrice() {
  return Number(currentPriceElement.textContent);
}

function setCurrentPrice(price) {
  currentPriceElement.textContent = price.toFixed(2);
}

function onExtraCheeseChange(event) {
  var target = event.target;
  var price = getCurrentPrice();
  if (target.checked) {
    price += 5;
  }
  else {
    price -= 5;
  }
  setCurrentPrice(price);
}

document.getElementById('extraCheese').addEventListener('change', onExtraCheeseChange);
<input type="checkbox" value="extraCheese" id="extraCheese" />
<label for="extraCheese"> Extra Cheese </label>

<h3 id="pizzaPrice"> Base Price: $<span id="currentPrice">15.00</span> </h3>

推荐阅读