想在我的代码中使用 for 循环，但我不知道怎么可能

Question

我即将学习编程，我创建了一个练习表格来测试我的知识。该复选框允许用户选择他们想要的汉堡包的额外配料。在 javascript 中，我可以使用 getElementById 命令获得额外的顶部值。代码运行完美，但我需要 for 循环遍历所有元素。我需要用 HTML 代码编写的复选框索引，以便能够在 javascript.

中使用

这是我在 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>

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

Answer 1

您需要创建一个包含所有元素的数组，然后您可以使用 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 开始，如果元素被选中，return 和 + 值。

您可以在 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'))

这将使您不必手动获取所有元素。

想在我的代码中使用 for 循环，但我不知道怎么可能

A want to use the for loop in my code, but I don't know how is it possible

html

javascript

getelementbyid

getelementsbyclassname