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

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_Image.addEventListener("click", ()=> {
<!DOCTYPE html>
<html lang="en">
    <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>
    <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 class="HD_container">
            <div class="HD_content">
                <img src="" class="HD_Image">
                <span class="HD_Text"></span>
    <script src="script.js"></script>

My first instinct would be to log it out:


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:


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

And if you log HD_container instead?

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

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

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

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.

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

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


when you want


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.

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