DEV Community

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

ARIF on April 01, 2022

`// Search Chat const searchMessage = () => { const val = messageSearch.value.toLowerCase(); message.forEach(chat => { let n...

Read full post

Iulian Preda • Apr 2 '22

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.

ARIF • Apr 2 '22 • Edited

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

Iulian Preda • Apr 2 '22

//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);

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

ARIF • Apr 2 '22 • Edited

//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...

Iulian Preda • Apr 2 '22

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.

ARIF • Apr 2 '22 • Edited

//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...

Iulian Preda • Apr 2 '22

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

ARIF • Apr 2 '22

Thanks men!

alfiks • Apr 2 '22

Looks like you haven't defined the message variable.

ARIF • Apr 2 '22

this is the complete error

ARIF • Apr 2 '22

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

ARIF • Apr 2 '22 • Edited

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

ARIF • Apr 2 '22

Why you asking your self am i kidding?

ARIF • Apr 2 '22

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

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

Diego (Relatable Code) • Apr 1 '22

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.

ARIF • Apr 1 '22

what can i do bro?

Jasper Staats • Apr 2 '22 • Edited

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 🙃