El siguiente código muestra indefinido:
function search(){ let clas = document.querySelector('input#search').value; if(clas=="Speed"){ clas="v"; }else if(clas=="Dro"){ clas="s"; }else if(clas=="Cza"){ clas="t"; }else if(clas=="Przys"){ clas="a"; } find(clas); } function find(clas="*"){ const elements = document.querySelector("main").childNodes; if(clas!="*"){ console.log(elements[0].classList.contains("v")); } }Quería verificar si los elementos de main contienen la clase "v", pero todos mis intentos concluyen con un error:
script.js:17 TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'contiene') en find (script.js:17) en search (script.js:12) en HTMLButtonElement.onclick (calculator.html:18) find @ script.js:17 búsqueda @ script.js:12 onclick @ calculadora.html:18
Main contiene elementos! No entiendo qué he hecho mal y cómo solucionarlo. ¿Alguien podría explicar y ayudar?
El error le dice que está tratando de usar contains en el valor undefined . Eso nos dice que el primer nodo secundario del elemento main no es un elemento (tal vez sea un nodo de texto o comentario; a menudo es un nodo de texto con espacios en blanco). Solo los nodos de elementos tienen classList . Por lo tanto elements[0].classList no está undefined .
Es posible que haya querido children en lugar de childNodes , si solo quería elementos secundarios.
He aquí un ejemplo de la diferencia:
const main = document.querySelector("main"); console.log("childNodes[0].nodeName:", main.childNodes[0].nodeName); console.log("children[0].nodeName:", main.children[0].nodeName); <main> <p>Hi there</p> </main> O si solo va a usar el primero, podría usar firstElementChild en lugar de children[0] .