for 循环中的 if 语句
If statement within a for loop
这是我刚刚在网络课上布置的作业，老实说，我没有一个老师清楚地解释 for 循环的工作原理。基本上，我不需要为每个变量定义一堆不同的 var 和一堆 if 语句，而是需要为所有输入提供一个 var，以及一个贯穿每个输入并添加到总数中的 for 循环。我包含了没有循环的代码，以及我尝试使用循环来做到这一点。我只是真的无法掌握循环，在线阅读根本没有帮助。
此代码执行最终目标：
<article>
<h2>Food Menu</h2>
<form>
<input type="checkbox" id="item1" value="8" />
<label for="item1">Fried chicken ($8.00)</label>
<input type="checkbox" id="item2" value="9" />
<label for="item2">Honey Baked Ham ($9.00)</label>
<input type="checkbox" id="item3" value="8" />
<label for="item3">Mac and Cheese ($8.00)</label>
<input type="checkbox" id="item4" value="13" />
<label for="item4">Grilled Salmon ($13.00)</label>
<input type="checkbox" id="item5" value="6" />
<label for="item5">Side salad ($6.00)</label>
<input type="submit" id="submit" value="Submit" />
</form>
<script>
function calcTotal(){
var itemTotal=0;
var item1=document.getElementById("item1");
var item2=document.getElementById("item2");
var item3=document.getElementById("item3");
var item4=document.getElementById("item4");
var item5=document.getElementById("item5");
if(item1.checked==true){itemTotal+=8;}
if(item2.checked==true){itemTotal+=9;}
if(item3.checked==true){itemTotal+=8;}
if(item4.checked==true){itemTotal+=13;}
if(item5.checked==true){itemTotal+=6;}
var salesTaxRate=0.07;
var orderTotal=itemTotal+(itemTotal*salesTaxRate);
document.getElementById("total").innerHTML="Your order total is $"+orderTotal,false;
}
document.getElementById("submit").addEventListener("click",calcTotal,false);
;
</script>
</article>
这段代码是我尝试使用 for 循环获得相同结果的尝试。
<article>
<h2>Food Menu</h2>
<form>
<input type="checkbox" id="item1" value="8" />
<label for="item1">Fried chicken ($8.00)</label>
<input type="checkbox" id="item2" value="9" />
<label for="item2">Honey Baked Ham ($9.00)</label>
<input type="checkbox" id="item3" value="8" />
<label for="item3">Mac and Cheese ($8.00)</label>
<input type="checkbox" id="item4" value="13" />
<label for="item4">Grilled Salmon ($13.00)</label>
<input type="checkbox" id="item5" value="6" />
<label for="item5">Side salad ($6.00)</label>
<input type="submit" id="submit" value="Submit" />
</form>
<script>
function calcTotal(){
var itemTotal=0;
var items = document.getElementById("input");
var salesTaxRate=0.07;
var orderTotal=itemTotal+(itemTotal*salesTaxRate);
document.getElementById("total").innerHTML="Your order total is $"+orderTotal,false;
for(i=0: i < items.length; i++){
if(input.items[i].checked==true)
orderTotal+=(items[i].value*1);
}
window.alert(itemTotal)
}
document.getElementById("submit").addEventListener("click",calcTotal,false);
;
</script>
</article>
所以你可以肯定在这个代码中改进很多东西，但让我坚持你现在寻求的 for 循环知识。
我将按以下方式重新排列您的代码：
var itemTotal=0;
var item1=document.getElementById("item1");
if(item1.checked==true){itemTotal+=8;}
var item2=document.getElementById("item2");
if(item2.checked==true){itemTotal+=9;}
var item3=document.getElementById("item3");
if(item3.checked==true){itemTotal+=8;}
var item4=document.getElementById("item4");
if(item4.checked==true){itemTotal+=13;}
var item5=document.getElementById("item5");
if(item5.checked==true){itemTotal+=6;}
如您所见，我们现在已将您的代码分为两个步骤：
- 获取某些内容（已检查状态）
- 将其添加到总数（价格是硬编码的）。
让我们升级它以使其更加动态。
var itemTotal=0;
var i=1;
var item1=document.getElementById("item"+i);
if(item1.checked==true){itemTotal+=parseInt(item1.value);}
i++
var item2=document.getElementById("item"+i);
if(item2.checked==true){itemTotal+=parseInt(item2.value);}
i++
var item3=document.getElementById("item"+i);
if(item3.checked==true){itemTotal+=parseInt(item3.value);}
i++
var item4=document.getElementById("item"+i);
if(item4.checked==true){itemTotal+=parseInt(item4.value);}
i++
var item5=document.getElementById("item"+i);
if(item5.checked==true){itemTotal+=parseInt(item5.value);}
您会注意到此处所需的parseInt函数，因为对字符串执行+只会连接。如果您已经了解我们到目前为止所做的工作，那么我们可以通过 for 循环更进一步。
var itemTotal=0;
for (var i=1; i<6; i++) {
var item=document.getElementById("item"+i);
if(item.checked==true){itemTotal+=parseInt(item.value);}
}
希望这是有道理的。我们刚刚使用了一些变量（特别是i变量）来动态获取项目并更新总金额。For 循环（以及一般的循环）用于重复工作。这只是找出需要重复的内容以及需要重复多少次的问题。您可以设置循环变量的起始值和结束值，以方便您使用。
需要注意的几点：
-
document.getElementsByTagName("input")将按标记名称生成输入 DOM 元素的列表，以便不再需要 ID。您还可以在表单标签上放置起始 ID，然后执行form.getElementsByTagName - 您没有结果div 来显示总结果，从而导致 JS 错误，从而停止执行
- 在 for 循环中遇到
input.items语法错误
function myFunction() {
var itemTotal = 0;
var items = document.getElementsByTagName("input")
var salesTaxRate = 0.07;
var orderTotal = 0;
for (i = 0; i < items.length; i++) {
if (items[i].checked == true) {
itemTotal += (items[i].value * 1);
}
}
orderTotal = itemTotal + (itemTotal * salesTaxRate);
document.getElementById("total").innerHTML = "Your order total is $" + orderTotal;
return false;
}<article>
<h2>Food Menu</h2>
<form action="" onsubmit="return myFunction();">
<input type="checkbox" id="item1" value="8" />
<label for="item1">Fried chicken ($8.00)</label>
<input type="checkbox" id="item2" value="9" />
<label for="item2">Honey Baked Ham ($9.00)</label>
<input type="checkbox" id="item3" value="8" />
<label for="item3">Mac and Cheese ($8.00)</label>
<input type="checkbox" id="item4" value="13" />
<label for="item4">Grilled Salmon ($13.00)</label>
<input type="checkbox" id="item5" value="6" />
<label for="item5">Side salad ($6.00)</label>
<input type="submit" id="submit" value="Submit" />
</form>
<div id="total"></div>
</article> <h2>Food Menu</h2>
<form>
<input type="checkbox" id="item1" value="8" />
<label for="item1">Fried chicken ($8.00)</label>
<input type="checkbox" id="item2" value="9" />
<label for="item2">Honey Baked Ham ($9.00)</label>
<input type="checkbox" id="item3" value="8" />
<label for="item3">Mac and Cheese ($8.00)</label>
<input type="checkbox" id="item4" value="13" />
<label for="item4">Grilled Salmon ($13.00)</label>
<input type="checkbox" id="item5" value="6" />
<label for="item5">Side salad ($6.00)</label>
<!-- I changed this to be a button just so you can see the results, probably need to be a submit later again, but for now this way you can see how the result changes. -->
<input type="button" id="submit" value="Submit" />
</form>
<!-- You need an element with id 'total', you were calling it to set the result for total, but it didn't exist -->
<label id="total"></label>
<script>
function calcTotal(){
var itemTotal=0;
//use querySelectorAll to get and array with all the inputs, getElementById will return just one element
var items = document.querySelectorAll("input");
var salesTaxRate= 0.07;
var orderTotal= 0;
// you have a sintax error here
for(i=0; i < items.length; i++){
if(items[i].checked==true) {
itemTotal= parseInt(items[i].value);
itemTotal= parseFloat(itemTotal + (itemTotal*salesTaxRate));
orderTotal+=itemTotal;
}
}
// you need to display orderTotal, that is the variable you are incrementing, no itemTotal
document.getElementById("total").innerHTML="Your order total is $"+orderTotal;
window.alert(orderTotal)
}
document.getElementById("submit").addEventListener("click",calcTotal,false);
</script>
相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 如何在 API 调用后和 if 语句中启用提交按钮
- 带有多个elseif的Javascript if语句
- Sharepoint JScript if语句未执行
- for循环中的javascript if语句找不到==
- jquery if语句返回return wong语句
- 在if语句下的html中使用javascript变量
- 将错误与if语句混淆
- 循环通过数组的If语句不起作用
- jQuery模板中的If语句
- 如何从数据库中回显If语句
- 如何减少if语句的数量
- 在Javascript中将一个值和字符串数组转换为if语句
- Dropbox oauth认证的IF语句的第二部分是't已触发
- MVC Jquery-按钮点击-获取if语句错误
- 如何重写Javascript If语句以选择Classes而不是ID's的HTML格式
- KnockoutJS:为虚拟元素使用嵌套的条件if语句
- If语句发布或操作员发布
- 清除函数中if语句内部不起作用的间隔
- 使用if语句重新循环
