Noch ein anderer nicht abgefangener TypeError:: Die Eigenschaft 'replace' von undefined kann nicht gelesen werden

Question

Ich schreibe ein bisschen JS-Code, um Klassen für bestimmte DOM-Elemente zu wechseln. Alles funktioniert, wie es sollte, aber ich bekomme auch diesen Fehler und dieses verhindert, dass der folgende Code ausgeführt wird.

Ich habe eine Überprüfung hinzugefügt, um sicherzustellen, dass das Array von Elementen nicht leer ist, wie ich dachte das war das Problem. Aber immer noch tritt der Fehler auf. Debugging zeigte immer einen Wert für old_name, wenn replace aufgerufen wird. Fehle ich etwas JS-esque?

Dies ist der Teil des Codes, der den Fehler verursacht, 31 speziell Linie:

 

    if (w > MOBILE_THRESHOLD) { 
    responsive_elements = document.getElementsByClassName("desktop"); 
    if (responsive_elements.length > 0) { 
     for (i in responsive_elements) { 
     var old_name = responsive_elements[i].className; 
     var new_name = old_name.replace("desktop", "mobile"); 
     responsive_elements[i].className = new_name; 
     } 
    } 
 

Bei Bedarf ich glücklich sein, mehr Code zur Verfügung zu stellen, oder was auch immer sie benötigt werden. Vielen Dank!

Answer 1

Never use for...in loops to iterate array-like objects!!!!!

In diesem Fall hat die HTMLCollection enumerable Eigenschaften wie item oder namedItem. Wenn Sie auf diese zugreifen, wird kein HTML-Element zurückgegeben. Daher ist className nicht definiert.

richtig zu durchlaufen, Sie eines dieser

for(var i=0; i<responsive_elements.length; ++i) { 
    // ... 
} 

[].forEach.call(responsive_elements, function(element, index, collection) { 
    // ... 
});