title: Javascript For Loop + Submit Button
body: <p>I am trying to display a check box with 5 items. When the user clicks these items and hits submit, the total with the tax rate included will appear. My problem is that the submit box does not seem to work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;!--
        JavaScript 6th Edition  v 1.16
  
        Filename: page 2.html
     --&gt;
     &lt;meta charset="utf-8" /&gt;
     &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"&gt;
     &lt;title&gt;Hedgie Heroes: Shop&lt;/title&gt;
     &lt;link rel="stylesheet" media="screen and (max-device-width: 999px)" href="projhand.css" /&gt;
     &lt;link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="project.css" /&gt;
   
     &lt;link href="https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css"&gt;
     &lt;script src="modernizr.custom.05819.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;div id="container"&gt;
        &lt;header&gt;
           &lt;h1&gt;
              &lt;img src="https://cdn.gomix.com/d593761a-2c9a-4565-9104-09aad9e28c12%2FHedgehog.png" width="200"  /&gt;
           &lt;/h1&gt;
        &lt;/header&gt;
  
        &lt;nav&gt;
           &lt;ul&gt;
          &lt;!--
          Reminder:Add new page by first creating the html file. 
          Then adjust the id and href below to allow correct navigation.
          --&gt;
              &lt;li&gt;&lt;a href="/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li id="currentpage"&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li id="page3"&gt;&lt;a href="page3.html"&gt;Hedgehog Care&lt;/a&gt;&lt;/li&gt;
              &lt;li id="page4"&gt;&lt;a href="page4.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;      &lt;/ul&gt;
        &lt;/nav&gt;
          
        &lt;article&gt;
           &lt;h2&gt;The Starter Kit Necessities!&lt;/h2&gt;
          &lt;br&gt;
           &lt;p&gt;The options below is a list of recommended supplies for your Hedgehog! All supplies come with free treats and the opportunity to sign up for the Hedgie Club!&lt;/p&gt;
          &lt;br&gt;
          &lt;!--
          Everything below is for the products listed.
          &lt;br&gt; is implemented for page design and line breaks.
          --&gt;       
        &lt;form&gt;
           &lt;input type="checkbox" id="item1" value="24.00" /&gt;
           &lt;label for="item1"&gt;Silent Running Wheel ($24.00)&lt;/label&gt;
          &lt;br&gt;
           &lt;input type="checkbox" id="item2" value="8.00" /&gt;
           &lt;label for="item2"&gt;Food and Water Dish ($8.00)&lt;/label&gt;
          &lt;br&gt;
           &lt;input type="checkbox" id="item3" value="12.00" /&gt;
           &lt;label for="item3"&gt;Snuggle Sack ($12.00)&lt;/label&gt;
          &lt;br&gt;
           &lt;input type="checkbox" id="item4" value="10.00" /&gt;
           &lt;label for="item4"&gt;Hedgehog Food ($10.00)&lt;/label&gt;
          &lt;br&gt;
           &lt;input type="checkbox" id="item5" value="13.00" /&gt;
           &lt;label for="item5"&gt;Igloo ($13.00)&lt;/label&gt;
          &lt;br&gt;
           &lt;input type="button" value="Submit" id="sButton" /&gt;
        &lt;/form&gt;
          
        &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt;
        &lt;p&gt; **Note** All colored products are gender neutral. &lt;/p&gt;
          
          
        &lt;/article&gt;
      
        
       function calcTotal() 
        {
            var itemTotal = 0;
            var salesTaxRate = .06; //stores the curent sales tax
            var items = document.getElementByTagName("input");
            for(var i=0; i&lt;5; i++) {
              if(items[i].checked) {
                  itemTotal += (items[i].value * 1);
              }
            }
            itemTotal *= 1+ salesTaxRate; //notice the use of the compound operator here
            document.getElementById("total").innerHTML = "Your order total is $" + itemTotal.toFixed(2);
  }
  
        //add backward compatible event listener to Submit button
          var submitButton = document.getElementById ("sButton");
          if(submitButton.addEventListener) {
            submitButton.addEventListener("click", calcTotal, false);
          } else if (submitButton.attachEvent)  {
            submitButton.attatchEvent("onclick", calcTotal)
          }
       
  &lt;/script&gt;
       
        &lt;footer&gt;
           &lt;p&gt;Hedgie Heroes &amp;bull; Salisbury, Maryland&lt;/p&gt;
        &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>