Please why is the code giving me a "TypeError: Cannot Read Property of Undefined" error when adding the "appear" class in java script.

JavaScript
1 
const images = document.querySelectorAll(".images img");
const HD_container = document.querySelectorAll(".HD_container");
const HD_Image = document.querySelectorAll(".HD_Image");
const HD_Text = document.querySelectorAll(".HD_Text");

images.forEach((image) => {
    image.addEventListener("click", () => {
        HD_Image.src = image.src;
        HD_Text.innerHTML = image.alt;
        HD_container.classList.add("appear");

        HD_Image.addEventListener("click", ()=> {
         HD_container.classList.remove("appear");   
        });
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Interactive Gallery</title>
</head>
<body>
    <div class="Gallery_container">
        <div class="h1">Image Gallery</div>
        <div class="images">
            <img src="images/image01.jpg" alt="Bird perched on a Branch">
            <img src="images/image02.jpg" alt="Golden Lion Tamarin">
                
        </div>
        <div class="HD_container">
            <div class="HD_content">
                <img src="" class="HD_Image">
                <span class="HD_Text"></span>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
2

My first instinct would be to log it out:

HD_container.classList

The error (if I understand abbreviation of it) is that that is undefined. I’d want to log that out. Then maybe I’d log out:

HD_container
3

Hi Kevin
when i logged HD_container.classList, it showed undefiined on the console.

4

And if you log HD_container instead?

5

Hi
it displays the message “ NodeList[div.HD container]”

6

Did you google “document.querySelectorAll” and see what it returns?

7

i have but still can figure out where exactly the issue is

8

I don’t do web stuff and when I do it’s React so I have to look this stuff up, too.

When I google “MDN querySelectorAll”, I get to a page where I read:

Return value

A non-live NodeList containing one Element object for each element that matches at least one of the specified selectors or an empty NodeList in case of no matches.

If I further look into NodeList, it sounds a lot more like an array than an object. You are treating it like it is an object.

9

so how do you suggest i go about solving the issue.

10

It’s similar to an array, works the same way: it is a list of elements, not one element. You can’t add a class to a list of elements, it doesn’t make sense. In pseudocode, what you’re trying to do is

[HD_Container_element].classList.add

when you want

HD_container_element.classList.add

querySelectorAll gives you a collection of elements. There may be zero or one element in the collection, but it is still a collection.

querySelector gives you a specific element.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.