-2

Code below displays undefined:

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"));
        }
}

I wanted to check if elements of main contain class "v" but my every attempt concludes with an error:

script.js:17 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') at find (script.js:17) at search (script.js:12) at HTMLButtonElement.onclick (calculator.html:18) find @ script.js:17 search @ script.js:12 onclick @ calculator.html:18

Main contains elements! I do not understand what I've done wrong and how to fix it. Could someone explain and help?

Ofiec
  • 5
  • 5
  • _"Cannot read properties of undefined (reading 'contains')"_ - You try to read/access the property `contains` from something that is `undefined` (it's not that `.contains()` is `undefined` as mentioned in the title) – Andreas Nov 06 '21 at 12:53
  • 1
    the element probably has no classes at all - could be just a text, not a dom element – Flash Thunder Nov 06 '21 at 13:00

1 Answers1

1

The error tells you that you're trying to use contains on the value undefined. That tells us that the first child node of the main element is not an element (perhaps it's a text or comment node; often it's a text node with whitespace). Only element nodes have classList. So elements[0].classList is undefined.

You may have wanted children rather than childNodes, if you wanted only element children.

Here's an example of the difference:

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>

Or if you're only going to use the first one, you could use firstElementChild instead of children[0].

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    You were right, I did use comments and as it appears that was the problem. The ultimate solution is: function find(clas='*'){ const elements = document.querySelector("main").children; if(clas!="*"){ for (let i = 0; i < elements.length; i++) { if(elements[i].classList==undefined){ console.log("un!"); } if(elements[i].classList.contains("v")){ elements[i].style.display="flex"; }else{ elements[i].style.display="none"; } } }else{ } } – Ofiec Nov 06 '21 at 13:03