if语句中的for循环

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.

Answer 2

A couple things to note:

• document.getElementsByTagName("input") will generate a list of the input DOM elements by tag name so that IDs are no longer necessary. You could also put a starting ID on the form tag, and then do form.getElementsByTagName
• you had no result div to display the total results, causing a js error, which stops execution
• you had syntax errors with input.items in the for loop

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

 <article> <h2>Food Menu</h2> <form action="" onsubmit="return myFunction();"> <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> <div id="total"></div> </article> 

Answer 3

  <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>
  <!-- I changed this to be a button just so you can see the results, probably need to be a submit later again, but for now this way you can see how the result changes.   -->         
     <input type="button" id="submit" value="Submit" />
  </form>

  <!-- You need an element with id 'total', you were calling it to set the result for total, but it didn't exist -->
  <label id="total"></label>
   <script>

   function calcTotal(){
       var itemTotal=0;

       //use querySelectorAll to get and array with all the inputs, getElementById will return just one element
       var items = document.querySelectorAll("input");
       var salesTaxRate= 0.07;
       var orderTotal=   0;


       // you have a sintax error here
       for(i=0; i < items.length; i++){
           if(items[i].checked==true) {
               itemTotal= parseInt(items[i].value);
               itemTotal= parseFloat(itemTotal + (itemTotal*salesTaxRate));
               orderTotal+=itemTotal;
            }
       }

       // you need to display orderTotal, that is the variable you are incrementing, no itemTotal
         document.getElementById("total").innerHTML="Your order total is $"+orderTotal;

       window.alert(orderTotal)
   }

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


   </script>