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

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

这是我用 HTML 写的:

http://img4.mukewang.com/6482cf7e0001b25b05960455.jpg

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

}


互换的青春
浏览 96回答 1
1回答

慕的地6264312

您需要创建一个包含所有元素的数组,然后您可以使用 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 开始,如果元素被选中,则返回总和 + 值。在你的 JavaScript 中,你最好这样做:const elements = Array.from(document.querySelectorAll('.extra > div > input'))这将使您不必手动获取所有元素。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript