Mixing
JS change background colour needs a page refresh? [closed]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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;
javascript css
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
closed as off-topic by Quentin, Calvin Nunes, Bob Dalgleish, peinearydevelopment, Mickael Maison Jan 3 at 14:09
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Quentin, Calvin Nunes, Bob Dalgleish, Mickael Maison
If this question can be reworded to fit the rules in the help center, please edit the question.
|
show 1 more comment
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;
javascript css
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
closed as off-topic by Quentin, Calvin Nunes, Bob Dalgleish, peinearydevelopment, Mickael Maison Jan 3 at 14:09
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Quentin, Calvin Nunes, Bob Dalgleish, Mickael Maison
If this question can be reworded to fit the rules in the help center, please edit the question.
"I'm assuming this is because the alert is causing a partial page refresh?" — It doesn't.
– Quentin
Jan 3 at 11:11
1
I have theories as to why you have this problem, but you need to provide a Minimal, Complete, and Verifiable example before I can test them.
– Quentin
Jan 3 at 11:11
1
Please provide your HTML and CSS code as well.
– Joykal Infotech
Jan 3 at 11:11
3
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: stackoverflow.com/questions/2304941/…
– ZorgoZ
Jan 3 at 11:14
@zorgoZ that solved it! Thank you! If you put that as the answer I'll mark it as correct.
– hlh3406
Jan 3 at 11:19
|
show 1 more comment
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;
javascript css
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
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;
javascript css
javascript css
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
edited Jan 3 at 11:20
hlh3406
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
asked Jan 3 at 11:09
hlh3406hlh3406
81011936
81011936
closed as off-topic by Quentin, Calvin Nunes, Bob Dalgleish, peinearydevelopment, Mickael Maison Jan 3 at 14:09
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Quentin, Calvin Nunes, Bob Dalgleish, Mickael Maison
If this question can be reworded to fit the rules in the help center, please edit the question.
closed as off-topic by Quentin, Calvin Nunes, Bob Dalgleish, peinearydevelopment, Mickael Maison Jan 3 at 14:09
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Quentin, Calvin Nunes, Bob Dalgleish, Mickael Maison
If this question can be reworded to fit the rules in the help center, please edit the question.
"I'm assuming this is because the alert is causing a partial page refresh?" — It doesn't.
– Quentin
Jan 3 at 11:11
1
I have theories as to why you have this problem, but you need to provide a Minimal, Complete, and Verifiable example before I can test them.
– Quentin
Jan 3 at 11:11
1
Please provide your HTML and CSS code as well.
– Joykal Infotech
Jan 3 at 11:11
3
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: stackoverflow.com/questions/2304941/…
– ZorgoZ
Jan 3 at 11:14
@zorgoZ that solved it! Thank you! If you put that as the answer I'll mark it as correct.
– hlh3406
Jan 3 at 11:19
|
show 1 more comment
"I'm assuming this is because the alert is causing a partial page refresh?" — It doesn't.
– Quentin
Jan 3 at 11:11
1
I have theories as to why you have this problem, but you need to provide a Minimal, Complete, and Verifiable example before I can test them.
– Quentin
Jan 3 at 11:11
1
Please provide your HTML and CSS code as well.
– Joykal Infotech
Jan 3 at 11:11
3
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: stackoverflow.com/questions/2304941/…
– ZorgoZ
Jan 3 at 11:14
@zorgoZ that solved it! Thank you! If you put that as the answer I'll mark it as correct.
– hlh3406
Jan 3 at 11:19
"I'm assuming this is because the alert is causing a partial page refresh?" — It doesn't.
– Quentin
Jan 3 at 11:11
"I'm assuming this is because the alert is causing a partial page refresh?" — It doesn't.
– Quentin
Jan 3 at 11:11
1
1
I have theories as to why you have this problem, but you need to provide a Minimal, Complete, and Verifiable example before I can test them.
– Quentin
Jan 3 at 11:11
I have theories as to why you have this problem, but you need to provide a Minimal, Complete, and Verifiable example before I can test them.
– Quentin
Jan 3 at 11:11
1
1
Please provide your HTML and CSS code as well.
– Joykal Infotech
Jan 3 at 11:11
Please provide your HTML and CSS code as well.
– Joykal Infotech
Jan 3 at 11:11
3
3
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: stackoverflow.com/questions/2304941/…
– ZorgoZ
Jan 3 at 11:14
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: stackoverflow.com/questions/2304941/…
– ZorgoZ
Jan 3 at 11:14
@zorgoZ that solved it! Thank you! If you put that as the answer I'll mark it as correct.
– hlh3406
Jan 3 at 11:19
@zorgoZ that solved it! Thank you! If you put that as the answer I'll mark it as correct.
– hlh3406
Jan 3 at 11:19
|
show 1 more comment
2 Answers
2
active
oldest
votes
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()'?
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
add a comment |
try below code
var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].style.backgroundColor = "yellow";
answered Jan 3 at 11:17
jigneshjignesh
1
Have you read the post?
– ZorgoZ
Jan 3 at 11:19
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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()'?
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
add a comment |
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()'?
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
add a comment |
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()'?
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
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()'?
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
answered Jan 3 at 11:22
ZorgoZZorgoZ
1,3311617
1,3311617
add a comment |
add a comment |
try below code
var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].style.backgroundColor = "yellow";
answered Jan 3 at 11:17
jigneshjignesh
1
Have you read the post?
– ZorgoZ
Jan 3 at 11:19
add a comment |
try below code
var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].style.backgroundColor = "yellow";
answered Jan 3 at 11:17
jigneshjignesh
1
Have you read the post?
– ZorgoZ
Jan 3 at 11:19
add a comment |
try below code
var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].style.backgroundColor = "yellow";
answered Jan 3 at 11:17
jigneshjignesh
1
try below code
var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].style.backgroundColor = "yellow";
answered Jan 3 at 11:17
jigneshjignesh
1
answered Jan 3 at 11:17
jigneshjignesh
1
answered Jan 3 at 11:17
jigneshjignesh
1
answered Jan 3 at 11:17
jigneshjignesh
1
1
Have you read the post?
– ZorgoZ
Jan 3 at 11:19
add a comment |
Have you read the post?
– ZorgoZ
Jan 3 at 11:19
Have you read the post?
– ZorgoZ
Jan 3 at 11:19
Have you read the post?
– ZorgoZ
Jan 3 at 11:19
add a comment |
"I'm assuming this is because the alert is causing a partial page refresh?" — It doesn't.
– Quentin
Jan 3 at 11:11
1
I have theories as to why you have this problem, but you need to provide a Minimal, Complete, and Verifiable example before I can test them.
– Quentin
Jan 3 at 11:11
1
Please provide your HTML and CSS code as well.
– Joykal Infotech
Jan 3 at 11:11
3
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: stackoverflow.com/questions/2304941/…
– ZorgoZ
Jan 3 at 11:14
@zorgoZ that solved it! Thank you! If you put that as the answer I'll mark it as correct.
– hlh3406
Jan 3 at 11:19