JS change background colour needs a page refresh?

Question

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.

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?

var cells = document.getElementById("example").getElementsByTagName("td");
        //alert("test - colours appear if I leave this line in");
        for (var i = 0; i < 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";
            }
        }

Fixed now!

I made a change to my code to ensure that this happens after the page load has finished:

    function func1() {
        var cells = document.getElementById("example").getElementsByTagName("td");
        //console.log("hello");
        for (var i = 0; i < 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;

"I'm assuming this is because the alert is causing a partial page refresh?" — It doesn't. — Quentin, Jan 03 '19 at 11:11
I have theories as to why you have this problem, but you need to provide a [mcve] before I can test them. — Quentin, Jan 03 '19 at 11:11
You are probably not executing the code **after** the page is loaded. By displaying an alert, the code is suspended, but loading the page continues - this way, when you release the alert dialog, it has all the elements it needs. Make sure you wait with the execution until the page is loaded. Take a look here: https://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready — ZorgoZ, Jan 03 '19 at 11:14
@zorgoZ that solved it! Thank you! If you put that as the answer I'll mark it as correct. — hlh3406, Jan 03 '19 at 11:19
Possible duplicate of [What is the non-jQuery equivalent of '$(document).ready()'?](https://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready) — peinearydevelopment, Jan 03 '19 at 13:31

score 1 · Accepted Answer · answered Jan 03 '19 at 11:22

You are probably not executing the code after the page is completely loaded. By displaying an alert, the script's execution is suspended, but loading and rendering the page continues. By the time you are releasing the alert dialog by pressing OK, and the script continues, it has all the elements it needs. Make sure you wait with the execution until the page is loaded.

Take a look here for various methods to do this: What is the non-jQuery equivalent of '$(document).ready()'?

score -2 · Answer 2 · answered Jan 03 '19 at 11:17

-2

try below code var x = document.getElementById("mytable").getElementsByTagName("td"); x[0].style.backgroundColor = "yellow";

answered Jan 03 '19 at 11:17

jignesh

1

Have you read the post? – ZorgoZ Jan 03 '19 at 11:19

JS change background colour needs a page refresh?

2 Answers2