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

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

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

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