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

Question

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

This what I written in 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:

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

You'll need to make an array of all your elements and then you can use JavaScript's reduce method.

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. In this case we start with 0 and return the sum + value if the element is checked.

You can read more about reduce on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

---

In your JavaScript, you might be better off doing:

const elements = Array.from(document.querySelectorAll('.extra > div > input'))

This will save you from having to manually fetch all the elements.