title: JavaScript Error Debugging - using for loop with getElementById
body: <p>I don't know how to debug JavaScript codes.
  I guess I am having a problem using for loop  with getElementById. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;CGPA to Percentage calculator&lt;/title&gt;
      &lt;script type='text/javascript'&gt;
  
          function addFields(){
              var number = document.getElementById("sem").value;
              var container = document.getElementById("container");
          var pbtn = document.getElementById("percent");
              while (container.hasChildNodes()) {
                  container.removeChild(container.lastChild);
              }
  
          if(number&gt;0 &amp;&amp; number&lt;=8){
  
                for (i=0;i&lt;number;i++){
                      container.appendChild(document.createTextNode("SGPA [Semeter " + (i+1)+ "] : "));
                      var input = document.createElement("input");
                      input.type = "text";
                      input.name = "sem" + i;
                      container.appendChild(input);
                      container.appendChild(document.createElement("br"));
              container.appendChild(document.createElement("br"));
                      }
  
              pbtn.disabled = false;
          }
          else{
              if(number&gt;8)
                  alert("Enter a value less than 8");
              else
                  alert("Enter a valid input");
          }
          }
      function percent(){
          var number = document.getElementById("sem").value;
          var sum = 0.0;
          var pcnt = 0.0;
          for (i=0;i&lt;number;i++){
              sum = parseFloat(sum) + parseFloat(document.getElementById("sem"+i).value);
          }   
          pcent = parseFloat(sum) / parseInt(number);
          alert(pcent);
      }
      &lt;/script&gt;
  &lt;/head
  &lt;body&gt;
      &lt;div align ="center"&gt;Number of Semester (MAX [8]) : 
      &lt;input type="text" id="sem" name="sem" value=""&gt; &amp;nbsp;
      &lt;button type="button" id="filldetails" onclick="addFields()"&gt;Fill Details&lt;/button&gt; &amp;nbsp;
      &lt;button type="button" name="percent" id="percent" onclick="percent()" disabled="disabled"&gt;Calculate %&lt;/button&gt;
      &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
      &lt;div id="container"/&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>