[英]A want to use the for loop in my code, but I don't know how is it possible
I am about to learn programming and I have created a practice form to test my knowledge.我即将学习编程,我创建了一个练习表格来测试我的知识。 The checkbox allows the user to choose what extra topping they want for their hamburger.
该复选框允许用户选择他们想要的汉堡包的额外配料。 in javascript I can get extra topping value by using the getElementById command.
在 javascript 中,我可以使用 getElementById 命令获得额外的顶部值。 The code works perfectly but I need the for loop to go through all the elements.I need the checkbox's index which were written in HTML code to be able to use in javascript.
该代码运行良好,但我需要通过所有元素循环到 go。我需要用 HTML 代码编写的复选框索引才能在 javascript 中使用。
This what I written in HTML:这是我在 HTML 中写的:
<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>
And this in javascript:这在 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)
}
You'll need to make an array of all your elements and then you can use JavaScript's reduce
method.您需要创建一个包含所有元素的数组,然后您可以使用 JavaScript 的
reduce
方法。
Here's an example:这是一个例子:
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);
The .reduce
method reduces an array into a new value. .reduce
方法将数组缩减为新值。 In this case we start with 0 and return the sum + value if the element is checked.在这种情况下,我们从 0 开始,如果元素被选中,则返回总和 + 值。
You can read more about reduce on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce您可以在 MDN 上阅读更多关于 reduce 的信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
In your JavaScript, you might be better off doing:在您的 JavaScript 中,您最好执行以下操作:
const elements = Array.from(document.querySelectorAll('.extra > div > input'))
This will save you from having to manually fetch all the elements.这将使您不必手动获取所有元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.