title: JS change background colour needs a page refresh?
body: <p>I'm trying to change the background colour to a number of table cells after the page has loaded, depending on the content on the cells. </p>
  
  <p>If I include an alert in my code then when I click ok the colours appear on the page. If I don't have it then the table cells don't change colour. I'm assuming this is because the alert is causing a partial page refresh? Is there another way that I can do this and force the colours to appear? </p>
  
  <pre><code>var cells = document.getElementById("example").getElementsByTagName("td");
          //alert("test - colours appear if I leave this line in");
          for (var i = 0; i &lt; cells.length; i++) {
              if (cells[i].innerHTML == "G") {
                  cells[i].style.backgroundColor = "#CCE697";
              }
              else if (cells[i].innerHTML == "A") {
                  cells[i].style.backgroundColor = "#FEECA1";
              }
              else if (cells[i].innerHTML == "R") {
                  cells[i].style.backgroundColor = "#E32E30";
              }
          }
  </code></pre>
  
  <p><strong>Fixed now!</strong></p>
  
  <p>I made a change to my code to ensure that this happens after the page load has finished: </p>
  
  <pre><code>    function func1() {
          var cells = document.getElementById("example").getElementsByTagName("td");
          //console.log("hello");
          for (var i = 0; i &lt; cells.length; i++) {
              if (cells[i].innerHTML == "G") {
                  cells[i].style.backgroundColor = "#CCE697";
              }
              else if (cells[i].innerHTML == "A") {
                  cells[i].style.backgroundColor = "#FEECA1";
              }
              else if (cells[i].innerHTML == "R") {
                  cells[i].style.backgroundColor = "#E32E30";
              }
          }
      }
      window.onload = func1;
  </code></pre>