2

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

Jesus. Pedroza.
  • 23
  • 3
  • 1
    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 Mar 20 '20 at 20:53
  • 1
    Does this answer your question? [Detect when an image fails to load in Javascript](https://stackoverflow.com/questions/9815762/detect-when-an-image-fails-to-load-in-javascript) – ControlAltDel Mar 20 '20 at 20:57
  • 1
    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 Mar 20 '20 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. Mar 20 '20 at 22:19
  • @ControlAltDel its does not, what I want its to iterate around several options but thanks! – Jesus. Pedroza. Mar 20 '20 at 22:20

1 Answers1

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";  
    };
Leonid
  • 766
  • 4
  • 8