[英]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.