title: document.getElementById().innerHTML not working, no error on console
body: <p>In the function clueClicked, I am trying to pull the value from the array and change the innerHTML of the table, this is somehow not working. no errors on the console. Please help. I am using the id of the <code>&lt;td&gt;</code>, to change the content of the element. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Cross word Puzzel&lt;/title&gt;
  &lt;style&gt;
  #puzzel {
   width:330px;
   margin: 0;
   padding: 0;
   border-collapse: collapse;
   border: 1px solid black;
  }
  #cross{
   text-align: center;
   width:30px;
   height:30px;
   margin: 0;
   padding: 0;
   border-collapse: collapse;
   border: 1px solid white;
  }
  
  
  #buttons{
   width:30%;
   float: right;
  
  }
  tr{
   margin: 0;
   padding: 0;
   border-collapse: collapse;
  }
  #leftBox{
   float: left; 
  }
  #rightBox{
   float: left;
  }
  .butt{
   height:50px;
   width: 100px;
  }
  #puzzel{
   text-align: center;
  }
  .tableBox{
    width: 30px;
    height:30px;
    border: 1px solid black;
    text-align: center;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  
  var currentTextInput;
  var puzzelArrayData;
  
  function initializeScreen(){
  
   var puzzelTable = document.getElementById("puzzel");
   puzzelArrayData = preparePuzzelArray();
  
   for ( var i = 0; i &lt; puzzelArrayData.length ; i++ ) {
    var row = puzzelTable.insertRow(-1);
    var rowData = puzzelArrayData[i];
    for(var j = 0 ; j &lt; rowData.length ; j++){
     var cell = row.insertCell(-1);
     if(rowData[j] != 0){
      var txtID = String('txt' + '_' + i + '_' + j);
      cell.innerHTML = '&lt;input type="text" class="tableBox" maxlength="1" style="text-transform: lowercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')"&gt;';
     }else{
      cell.innerHTML = "1";
      cell.style.backgroundColor  = "black";
     }
    }
   }
  
  }
  
  function textInputFocus(txtID123){
   currentTextInput = txtID123;
  }
  
  function preparePuzzelArray(){
  var items = [ [0, 0, 0, 0, 'p', 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 'u', 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 'n', 0, 'b', 0, 0, 0, 0],
      [0, 'h', 'y', 'd', 'e', 'r', 'a', 'b', 'a', 'd', 0],
      [0, 0, 0, 0, 0, 0, 'n', 0, 0, 'e', 0],
      [0, 0, 0, 0, 0, 0, 'g', 0, 0, 'l', 0],
      [0, 0, 'm', 'u', 'm', 'b', 'a', 'i', 0, 'h', 0],
      [0, 0, 0, 0, 0, 0, 'l', 0, 0, 'i', 0],
      [0, 0, 0, 0, 0, 0, 'o', 0, 0, 0, 0],
      ['k', 'a', 's', 'h', 'm', 'i','r', 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 'e', 0, 0, 0, 0]
     ];
  return items;
  }
  function solveClicked(){
  var testString = 'txt_12_15';
  var tokens = testString.split('_');
  alert(tokens);
  }
  
  function clearAllClicked(){
   currentTextInput = '';
   var puzzelTable = document.getElementById("puzzel");
   puzzelTable.innerHTML = '';
      initializeScreen();
  }
  function checkClicked(){
  
   for ( var i = 0; i &lt; puzzelArrayData.length ; i++ ) {
    var rowData = puzzelArrayData[i];
    for(var j = 0 ; j &lt; rowData.length ; j++){
     if(rowData[j] != 0){
      var providedValue = document.getElementById('txt' + '_' + i + '_' + j).value;
      if(providedValue != puzzelArrayData[i][j]){
       console.log('Wrong entry found: ' + providedValue + " at " + i + j);
      }
     }
    }
   }
  }
  
  function clueClicked(){
   var temp1 = currentTextInput;
   var token = temp1.split("_");
   var row = token[1];
   var column = token[2];
   document.getElementById(temp1).innerHTML = puzzelArrayData[row][column];//here is the problem.
    
    
   
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initializeScreen()"&gt;
  &lt;div id="leftBox"&gt;
  &lt;table id="puzzel"&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="rightBox"&gt;
  &lt;table&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input class="butt"  type="submit" value="Clear All" onclick="clearAllClicked()"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input class="butt"  type="submit" value="Check" onclick="checkClicked()"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input class="butt"  type="submit" value="Solve" onclick="solveClicked()"&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;&lt;input class="butt"  type="submit" value="Clue" onclick="clueClicked()"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>