DEV Community

ARIF
ARIF

Posted on

How to solve "Uncaught TypeError: Cannot read properties of undefined" in Javascript

`// Search Chat
const searchMessage = () => {
const val = messageSearch.value.toLowerCase();
message.forEach(chat => {
let name = chat.querySelectorAll("h5").textContent.toLowerCase();
if (name.indexOf(val) != -1) {
chat.style.display = "flex";
} else {
chat.style.display = "none";
}
});
}

//Search Message
messageSearch.addEventListener("keyup", searchMessage);`

Discussion (20)

Collapse
ipreda profile image
Iulian Preda

I don't think anyone can actually solve your question but some advices can be given

  • Use 3 apostrophies at the beginning and at the end to signal a code block. They should be on new lines respective to the code. Also please use the preview option. For a single line of code you can use a single apostrophe at the beginning and at the end without a new line.
  • The submitted code is out of context. If this were stackoverflow the question wouldn't even have been approved to be displayed. Please try to recreate a small sample code that vontains everything we might need for an answer if you cannot post the entire code.
  • Now regarding to your error, that happens when a variable is undefined and you try to access some property for it. In newer versions of JavaScript you can use ? to access properties only when the variable is defined, otherwise you can check with an if(varName) .... Most probably the queries you used didn't find the elements or are not accessible as you expected.
Collapse
arif0ne profile image
ARIF Author • Edited on

Can you just told me where i put the ? in my code?

Collapse
ipreda profile image
Iulian Preda
//Search chat
const searchMessage = () => {
  const val = messageSearch.value.toLowerCase();
  message.forEach(chat => {
    let name = chat.querySelectorAll("h5").textContent.toLowerCase();
    if (name.indexOf(val) != -1) {
      chat.style.display = "flex";
    } else {
    chat.style.display = "none";
    }
  });
}

//Search Message
messageSearch.addEventListener("keyup", searchMessage);
Enter fullscreen mode Exit fullscreen mode

I formatted your code a bit.
I do not know what messageSearch represents and if it can be undefined. If it can then add ? wheneve you try to use one of it's properties. Same for message.
Also if message is an array you should rename it to messages

Thread Thread
arif0ne profile image
ARIF Author • Edited on

//here whole variable
const messages = document.querySelector(".messages");
const message = messages.querySelectorAll(".message");
const messageSearch = document.querySelector("#messages-search");

//and this is complete error massage bro kindly check the error massage
dev-to-uploads.s3.amazonaws.com/up...

Thread Thread
ipreda profile image
Iulian Preda

The error is only a printscreen. You can click the error message and check which line has problems.

From what I can see any variable you should typecheck each variable that deals with a query selector. I can only guess that some of those elements are not always on screen.

Also as a tip you should name anything that is an array with something meaningful, in your case 'messages' should be called 'messageElement' or something while 'message' should be 'messages' or 'messageArray' since the queryAll should return an array.

Thread Thread
arif0ne profile image
ARIF Author • Edited on

//here the line of error but i don't understand why error show
//just check this image bro
dev-to-uploads.s3.amazonaws.com/up...

Thread Thread
ipreda profile image
Iulian Preda

I checked the code
The problem is that you use querySlectorAll ehich returns an array, while the textContent can be used only on an element

Thread Thread
arif0ne profile image
ARIF Author

Thanks men!

Collapse
alfiks profile image
alfiks

Looks like you haven't defined the message variable.

Collapse
arif0ne profile image
ARIF Author

this is the complete error

Collapse
arif0ne profile image
ARIF Author

const message = messages.querySelectorAll(".message");
//this is the variable bro

arif0ne profile image
ARIF Author • Edited on

yeah what the issue for full stack web developer? Bro kindly explain your thought if Anything wrong i written?

Collapse
arif0ne profile image
ARIF Author

Why you asking your self am i kidding?

arif0ne profile image
ARIF Author

You right but you know some time small bugs eat big time..

That's way... And i fix the problem bro

Collapse
diballesteros profile image
Diego (Relatable Code)

Think this post lacks a significant amount of explanation. There is no frame of reference for the code posted or how it relates to the error.

Collapse
arif0ne profile image
ARIF Author

what can i do bro?

Collapse
jeystaats profile image
Jasper Staats • Edited on

AR!F, try to imagine why you like reading other people their blogs on dev.to.

Most blogs start with a takeaway that grabs you into a story and defines the problem Afer that you can come up with a solution (your snippet).

After that you can maybe give an outro/elaborate of what you conclusions were and what you would have done better.

Currently just pasting a snippet isn't defined as a "blog" but belongs on gist.github.com 😀 It just looks lazy or too easy 🙃