Question

我正在尝试制作一个表格，根据您使用 js 订购的数量自动降低商品的基本价格。你可以看到下面的javascript：

window.addEventListener("load", e => {
  var cardcost = 10;
  document.getElementById("count").addEventListener("input", updateCost);

  function updateCost(e) {
    let val = e.target.value

    if (val >= 100 && val <= 499) {
      cardcost = cardcost * .95;
    }
    if (val >= 500 && val <= 999) {
      cardcost = cardcost * .9;
    }
    if (val >= 1000) {
      cardcost = cardcost * .85;
    }
  }
  document.getElementById("curcost").textContent = cardcost;
});

<div>
  <form action="send.php" method="POST" class="form-content" id="popupform">
    <label for="count">
             <h4>How many cards would you like?</h4>
             <input type="text" name="count" value="50" id="count">
           </label>
    <p>Current Cost Per Product: <output id="curcost"></output> </p>
  </form>
</div>

所以我在顶部有一个基本卡值和一个事件侦听器来识别输入值。然后我尝试了一个 if 语句来隔离输入范围，我想在我的基值上乘以不同的比率来更新每个项目的当前成本。它可以识别目标值，但它似乎没有贯穿 if 语句。

任何帮助将不胜感激！（放轻松，我是 js 新手）

Answer 1

您还必须将 .textContent 放入函数中，以便它对输入做出反应。它在输入时什么都不做，只是在加载时，cardcost 仍然是空的。

还要了解如何在每个步骤中使用 console.log 以便调试代码。

什么是JavaScript Scope

window.addEventListener("load", e => {
  var cardcost = 10;
  document.getElementById("count").addEventListener("input", updateCost);

  function updateCost(e) {
    let val = e.target.value


    if (val >= 100 && val <= 499) {
      cardcost = cardcost * .95;
    }
    if (val >= 500 && val <= 999) {
      cardcost = cardcost * .9;
    }
    if (val >= 1000) {
      cardcost = cardcost * .85;
    }
    console.clear()
    console.log(cardcost)
    document.getElementById("curcost").textContent = cardcost;
  }
});

<div>
  <form action="send.php" method="POST" class="form-content" id="popupform">
    <label for="count">
             <h4>How many cards would you like?</h4>
             <input type="text" name="count" value="50" id="count">
           </label>
    <p>Current Cost Per Product: <output id="curcost"></output> </p>
  </form>
</div>

Answer 2

我正在跟进以对该答案进行一个小的改进。实际上，如果用户输入一个答案，然后将其删除或更改质量，则卡值将根据更新值与原始基值计算。我通过在每个 if 语句的开头使用 newcardcost=cardcost 清除值来解决此问题：

    var cardcost = 10

    document.getElementById("count").addEventListener("input", updateCost);
    function updateCost(e) {
      let val = e.target.value
      let newcardcost = cardcost;
      if (val >= 100 && val <= 499) {
        newcardcost=cardcost;
        newcardcost = (cardcost * .95).toFixed(2);
      }
      if (val >= 500 && val <= 999) {
        newcardcost=cardcost;
        newcardcost = (cardcost * .9).toFixed(2);
      }
      if (val >= 1000) {
        newcardcost=cardcost;
        newcardcost = (cardcost * .85).toFixed(2);
      }
      document.getElementById("curcost").textContent = newcardcost;
    }

这有效，但我想知道是否有更有效的方法来做到这一点。感谢您的评论。

JS：根据订单输入范围更新产品成本

2 个答案: