title: For loop Searching ID's Javascript
body: <p>Okay so I am a little baffled with this one, I'll show you the code first and then explain.</p>
  
  <pre><code>    var number = 1;
  var maxguess = 6;
  /*make the array of possible words*/
  var arr = ["horse", "cow", "blueberry", "apples", "time", "hollow", "pumpkin", "telephone", "computer", "calculator", "tower", "castle"];
  /*write shuffler code*/
  function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex ;
      // While there remain elements to shuffle...
      while (0 !== currentIndex) {
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;
          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
      }
    return array;
  }
  /*shuffle the array*/
  shuffle(arr);
  /*make the storage array for user entry*/
  var gstore = [];
  /*get the first entry in the array, make it a string, and remove any commas*/
  var teme = arr.slice(0, 1).toString().replace(/,/g,'');
  
  console.log(teme);
  
  for (var i = 0; i &lt;= 9; i++) {
      if (i &gt; teme.length){
     document.getElementById(i).innerHTML="x";
     }
  }
  
  /*listen for button click*/
  document.getElementById('sendIt').addEventListener('click', process);
  /*function for 'process'*/
  function process() {
      /*get the guess from the user*/
      var guess = document.getElementById('guess').value.toString().toLowerCase();
      /*check for any index of this guess*/
          if (gstore.indexOf(guess, 0) == -1){
              /*store this guess*/
              gstore.push(guess);
              /*make storage array for letter indicies*/
              var indices = [];
              /*find indicies of the guess*/
                  for(var i=0; i&lt;teme.length;i++) {
                      if (teme[i] === guess) {
                          document.getElementById(i).innerHTML = guess.toString();
                      }
                  }
              number++;
          }
      if (gstore.indexOf(guess, 0) != -1){
  
      }
  }
  </code></pre>
  
  <p>Alright, so this is a hangman game I am making in a class. Near the bottom of the JS you can see I wrote the following-</p>
  
  <pre><code>for(var i=0; i&lt;teme.length;i++) {
                      if (teme[i] === guess) {
                          document.getElementById(i).innerHTML = guess.toString();
                      }
                  }
  </code></pre>
  
  <p>Now, this gives me absolutely no errors in the JS console if I leave it as is. Now, i get an error when at the line saying </p>
  
  <pre><code>document.getElementById(i).innerHTML="";
  </code></pre>
  
  <p>when I have it outside the button click function here</p>
  
  <pre><code>console.log(teme);
  
  for (var i = 0; i &lt;= 9; i++) {
      if (i &gt; teme.length){
     document.getElementById(i).innerHTML="";
     }
  }
  </code></pre>
  
  <p>To be specific, the error states</p>
  
  <pre><code>[Error] TypeError: null is not an object (evaluating 'document.getElementById(i).innerHTML=" "')
      global code (clar.js, line 31)
  </code></pre>
  
  <p>Now if this is throwing an error here, is it worth changing the code in this location or did I do something not good in both instances even though the second instance works?</p>
  
  <p>All help is much appreciated, and my javascript teacher has no idea you can input a variable when writing</p>
  
  <pre><code>document.getElementById(variableName)
  </code></pre>
  
  <p>so he is literally of no help to me, and also i find it nice to be able to do something without a framework</p>
  
  <p>edit: sorry, forgot the HTML, that should help clear the air as to what I am doing</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="text" name="" value="" id="guess" /&gt;&lt;br&gt;
      &lt;input type="button" name="" value="submit" id="sendIt" /&gt;&lt;br /&gt;
      &lt;script src="./clar.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;span id="0"&gt;&lt;/span&gt;&lt;span id="1"&gt;&lt;/span&gt;&lt;span id="2"&gt;&lt;/span&gt;&lt;span id="3"&gt;&lt;/span&gt;&lt;span id="4"&gt;&lt;/span&gt;&lt;span id="5"&gt;&lt;/span&gt;&lt;span id="6"&gt;&lt;/span&gt;&lt;span id="7"&gt;&lt;/span&gt;&lt;span id="8"&gt;&lt;/span&gt;&lt;span id="9"&gt;&lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>