[英]A want to use the for loop in my code, but I don't know how is it possible
我即将学习编程,我创建了一个练习表格来测试我的知识。 该复选框允许用户选择他们想要的汉堡包的额外配料。 在 javascript 中,我可以使用 getElementById 命令获得额外的顶部值。 该代码运行良好,但我需要通过所有元素循环到 go。我需要用 HTML 代码编写的复选框索引才能在 javascript 中使用。
<div class="extra">
<div>
<input value="250" type="checkbox" name="cheese" id="cheese">
<label for="cheese">Sajt (+250 Ft)</label>
</div>
<div>
<input value="600"type="checkbox" name="meat" id="doublemeat">
<label for="doublemeat">+Hús (+600 Ft)</label>
</div>
<div>
<input value="250"type="checkbox" name="onion" id="onion">
<label for="onion">Hagyma (+250 Ft)</label>
</div>
<div>
<input value="450"type="checkbox" name="bacon" id="bacon">
<label for="bacon">Bacon (+450 Ft)</label>
</div>
<div>
<input value="600"type="checkbox" name="coleslaw" id="coleslaw">
<label for="coleslaw">Coleslaw saláta (+600)</label>
</div>
</div>
这在 javascript 中:
var extra=0;
if (document.getElementById("cheese").checked){
extra=extra+parseInt(cheese.value)}
if (document.getElementById("doublemeat").checked){
extra=extra+parseInt(doublemeat.value)}
if (document.getElementById("onion").checked){
extra=extra+parseInt(onion.value)}
if (document.getElementById("bacon").checked){
extra=extra+parseInt(bacon.value)}
if (document.getElementById("coleslaw").checked){
extra=extra+parseInt(coleslaw.value)
}
您需要创建一个包含所有元素的数组,然后您可以使用 JavaScript 的reduce
方法。
这是一个例子:
const elements = [
document.getElementById("cheese"),
document.getElementById("doublemeat"),
document.getElementById("onion"),
document.getElementById("bacon"),
document.getElementById("coleslaw")
];
const extra = elements.reduce((total, element) => {
if (element.checked) {
return total + parseInt(element.value);
}
return total;
}, 0);
.reduce
方法将数组缩减为新值。 在这种情况下,我们从 0 开始,如果元素被选中,则返回总和 + 值。
您可以在 MDN 上阅读更多关于 reduce 的信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
在您的 JavaScript 中,您最好执行以下操作:
const elements = Array.from(document.querySelectorAll('.extra > div > input'))
这将使您不必手动获取所有元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.