Javascript - Simplify a loop and a function

Question

Hello everyone I have been using StackOverflow for some time and always find the correct answer with the search box but this time I couldn't! that is why I ask for your help. I am sure the solution its simple but I I have done several test and I could fix my issue.

I want to make its if a image fails to load, change a text related to that image and make that text RED that is already working but caveman style, that why i need your help here

document.getElementById("0").onerror = function() {Fu0()};
document.getElementById("1").onerror = function() {Fu1()};
document.getElementById("2").onerror = function() {Fu2()};
function Fu0() {    
    document.getElementById("0").style.display = "none";
    var x = document.getElementById("T0");
    x.innerHTML = "ERROR";
    x.style.color = "red";
    x.style.fontWeight = "bolder"
    x.style.backgroundColor="800000";  
    };  
function Fu1() {    
    document.getElementById("1").style.display = "none";
    var x = document.getElementById("T1");
    x.innerHTML = "ERROR";
    x.style.color = "red";
    x.style.fontWeight = "bolder"
    x.style.backgroundColor="800000";  
    };
function Fu2() {    
    document.getElementById("2").style.display = "none";
    var x = document.getElementById("T2");
    x.innerHTML = "ERROR";
    x.style.color = "red";
    x.style.fontWeight = "bolder"
    x.style.backgroundColor="800000";  
    };

I have this more than 20 times on my HTML which means a crazy amount of lines I was thinking in a loop to run using (i) but I cannot manage to make it work.

I have try this and a few variation whit no success at all.

for (i = 0; i < 26; i++) {
document.getElementById(i).onerror = function() {Fu()};
}
function Fu() { 
    document.getElementById(i).style.display = "none";
    var x = document.getElementById("T"+i);
    x.innerHTML = "ERROR";
    x.style.color = "red";
    x.style.fontWeight = "bolder"
    x.style.backgroundColor="800000";  
    };

I will really appreciate it if you can help me, Thanks in advance

Honestly this is a great time to use jquery if you have no other frameworks. You can use a class or data selector, and change all those props on any number of visible elements all at once. — Trevor
– Trevor, Commented Mar 20, 2020 at 20:53
Does this answer your question? Detect when an image fails to load in Javascript — ControlAltDel
– ControlAltDel, Commented Mar 20, 2020 at 20:57
You should consider using CSS stylesheets so that you're not setting so many properties on style; that can be quite slow. Also, while the rules for IDs have relaxed in HTML5, using all-numeric IDs is still not a great idea for backwards compatibility. — Heretic Monkey
– Heretic Monkey, Commented Mar 20, 2020 at 21:12
thanks @Trevor I know its old but Im not expert on this, and this is what I remember from the College — Jesus. Pedroza.
– Jesus. Pedroza., Commented Mar 20, 2020 at 22:19
@ControlAltDel its does not, what I want its to iterate around several options but thanks! — Jesus. Pedroza.
– Jesus. Pedroza., Commented Mar 20, 2020 at 22:20

Leonid · Accepted Answer · 2020-03-20 21:28:06Z

1

for (let i = 0; i < 26; i++) {
document.getElementById(i).onerror = function() {Fu(i)};
}
function Fu(num) { 
    document.getElementById(num).style.display = "none";
    var x = document.getElementById("T"+ num);
    x.innerHTML = "ERROR";
    x.style.color = "red";
    x.style.fontWeight = "bolder"
    x.style.backgroundColor="800000";  
    };

answered Mar 20, 2020 at 21:28

Leonid

8045 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jesus. Pedroza. Over a year ago

OMG! its so simple that its beautiful and make feel dumber than before! really thanks!

Collectives™ on Stack Overflow

Javascript - Simplify a loop and a function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related