If statement within a for loop

Question

So this is an assignment I was just given in my web class, and to be honest I haven't had a single instructor clearly explain how a for loop works. Basically instead of having a bunch of different var defined and a bunch of if statements for each one, I need one var for all the inputs, and a for loop that will run through each input, and add to the total. I included my code that worked that doesn't have a loop, and my attempt at using a loop to do it . I just really can't grasp loops, and reading around online hasn't helped at all.

This code does what the end goal is:

<article>
      <h2>Food Menu</h2>
      <form>
         <input type="checkbox" id="item1" value="8" />
         <label for="item1">Fried chicken ($8.00)</label>
         <input type="checkbox" id="item2" value="9" />
         <label for="item2">Honey Baked Ham ($9.00)</label>
         <input type="checkbox" id="item3" value="8" />
         <label for="item3">Mac and Cheese ($8.00)</label>
         <input type="checkbox" id="item4" value="13" />
         <label for="item4">Grilled Salmon ($13.00)</label>
         <input type="checkbox" id="item5" value="6" />
         <label for="item5">Side salad ($6.00)</label>
         <input type="submit" id="submit" value="Submit" />
      </form>

       <script>

       function calcTotal(){
           var itemTotal=0;
           var item1=document.getElementById("item1");
           var item2=document.getElementById("item2");
           var item3=document.getElementById("item3");
           var item4=document.getElementById("item4");
           var item5=document.getElementById("item5");
           if(item1.checked==true){itemTotal+=8;}
           if(item2.checked==true){itemTotal+=9;}
           if(item3.checked==true){itemTotal+=8;}
           if(item4.checked==true){itemTotal+=13;}
           if(item5.checked==true){itemTotal+=6;}
           var salesTaxRate=0.07;
           var orderTotal=itemTotal+(itemTotal*salesTaxRate);
           document.getElementById("total").innerHTML="Your order total is $"+orderTotal,false;

       }

        document.getElementById("submit").addEventListener("click",calcTotal,false);

        ;
       </script>
   </article>

This code is my attempt at getting the same result with a for loop.

<article>
      <h2>Food Menu</h2>
      <form>
         <input type="checkbox" id="item1" value="8" />
         <label for="item1">Fried chicken ($8.00)</label>
         <input type="checkbox" id="item2" value="9" />
         <label for="item2">Honey Baked Ham ($9.00)</label>
         <input type="checkbox" id="item3" value="8" />
         <label for="item3">Mac and Cheese ($8.00)</label>
         <input type="checkbox" id="item4" value="13" />
         <label for="item4">Grilled Salmon ($13.00)</label>
         <input type="checkbox" id="item5" value="6" />
         <label for="item5">Side salad ($6.00)</label>
         <input type="submit" id="submit" value="Submit" />
      </form>

       <script>

       function calcTotal(){
           var itemTotal=0;
           var items = document.getElementById("input");
           var salesTaxRate=0.07;
           var orderTotal=itemTotal+(itemTotal*salesTaxRate);
           document.getElementById("total").innerHTML="Your order total is $"+orderTotal,false;
           for(i=0: i < items.length; i++){
               if(input.items[i].checked==true)
                   orderTotal+=(items[i].value*1);
           }
           window.alert(itemTotal)
       }

        document.getElementById("submit").addEventListener("click",calcTotal,false);

        ;
       </script>
   </article>

Answer 1

So a lot of things you can improve in this code for sure but let me just stick to the for loop knowledge you seek for now.

I'm going to re-arrange your code in the following manner:

var itemTotal=0;

var item1=document.getElementById("item1");
if(item1.checked==true){itemTotal+=8;}

var item2=document.getElementById("item2");
if(item2.checked==true){itemTotal+=9;}

var item3=document.getElementById("item3");
if(item3.checked==true){itemTotal+=8;}

var item4=document.getElementById("item4");
if(item4.checked==true){itemTotal+=13;}

var item5=document.getElementById("item5");
if(item5.checked==true){itemTotal+=6;}

As you can see we have now chunked your code into two steps:

1. Get something (checked state)
2. Add it to total (price is hardcoded).

Lets upgrade this to make it a bit more dynamic.

var itemTotal=0;

var i=1;
var item1=document.getElementById("item"+i);
if(item1.checked==true){itemTotal+=parseInt(item1.value);}

i++
var item2=document.getElementById("item"+i);
if(item2.checked==true){itemTotal+=parseInt(item2.value);}

i++
var item3=document.getElementById("item"+i);
if(item3.checked==true){itemTotal+=parseInt(item3.value);}

i++
var item4=document.getElementById("item"+i);
if(item4.checked==true){itemTotal+=parseInt(item4.value);}

i++
var item5=document.getElementById("item"+i);
if(item5.checked==true){itemTotal+=parseInt(item5.value);}

You'll notice the parseInt function required here since doing + on strings will just concatenate. If you've understood what we've done this far then we can just take it one step further with a for loop.

var itemTotal=0;

for (var i=1; i<6; i++) {
  var item=document.getElementById("item"+i);
  if(item.checked==true){itemTotal+=parseInt(item.value);}
}

Hope this makes sense. We've just used some variables (i in particular) to get the items dynamically and also to update the total amount. For loops (and loops in general) are used for repeated work. It's just a matter of finding out what needs to be repeated and how many times you need to repeat. You can set the starting and ending values of your loop variable to make things convenient for you.