When I click on element nothing shows up

Question

0.00/5 (No votes)

See more:

In my code, I am using a foreach loop on child items so that when they are clicked they will display some markup. I am filtering an array so that I can display certain code. But when I click on any of the elements everything inside the parent element is empty. I want to display the filtered code! What am I doing wrong?

index[2] targets a specific class inside the element being clicked.

Here is the JavaScript code:

JavaScript

const portfolioGrid = document.querySelector('.portfolio__grid');

let projects = [{
    id: 1,
    dataId: "TAFE",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'TAFE (Theater Arts For Everyone)',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "1",
    img: "../img/image-plane.jpg",
  },
  {
    id: 2,
    dataId: "2",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'College Admissions HQ',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "2",
    img: "https://source.unsplash.com/1600x900/?nature",
  },

  {
    id: 3,
    dataId: "3",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'Pilates Welness Center',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "3",
    img: "../img/image-restaurant.jpg",
  },
  {
    id: 4,
    dataId: "4",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'Lish',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "4",
    img: "../img/image-restaurant.jpg",
  },

  {
    id: 5,
    dataId: "5",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'secondEncounter',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "5",
    img: "../img/image-restaurant.jpg",
  },

  {
    id: 5,
    dataId: "5",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'YOU',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "5",
    img: "../img/image-restaurant.jpg",
  },

  {
    id: 9,
    dataId: "9",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'ME',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "9",
    img: "../img/image-restaurant.jpg",
  },
  {
    id: 11,
    dataId: 11,
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'US',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "11",
    img: "../img/image-restaurant.jpg",
  },
  {
    id: 8,
    dataId: "8",
    title: "Identity System",
    description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
    date: '2016 - present',
    client: 'MINE',
    role: 'Graphic Designer',
    projectType: 'Layout (color + graphics)',
    programClass1: 'ai',
    programClass2: 'id',
    program1: 'Ai',
    program2: 'Id',
    category: "8",
    img: "../img/image-restaurant.jpg",
  },

];

    var children = portfolioGrid.childNodes;
children.forEach(function callback(v, index) {
            let projectIds = v.id;
            index = v.classList;
            if(index[2] == projectIds) {
                v.addEventListener('click', function() {
                    const portfolioProject = projects.filter(function(portfolioProjectItems) {
                        if (portfolioProjectItems.id === index) {
                            return portfolioProjectItems;
                        }
                    });
        
                    if (projectIds === "all") {
                        projectProjects(projects);
                    } else {
                        projectProjects(portfolioProject);
                    }
                });
            }
            
        });

    function projectProjects(projectProjectsItems) {
        let didplayProjectsProjectsItems = projectProjectsItems.map(function(item) {
            return `
        <div id="${item.dataId}" class="${item.id}"><h2 class="projects__heading">${item.title}</h2>
            <div class="projects__info">
                <div class="projects__description">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!
                </div> <!-- end project__description -->
                <div class="projects__ID">
                    <p class="date">Created: ${item.date}</p>
                    <p class="client">Client: ${item.client}</p>
                    <p class="role">Role: ${item.role}</p>
                    <p class="project-type">Project Type: ${item.projectType}</p>
                    <p class="programs">Programs Used: ${item.program1}</p>
                </div> <!-- end project__header -->
            </div> <!-- end project__info -->
            <div class="projects__gallery">
                <div class="projects__image"><img src="../img/CAHQ/CAHQ-Brochure-Inside.jpg" alt=""></div>
                <div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
                <div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
                <div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
                <div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
            </div> 
        </div>`;
    
        });
    
        didplayProjectsProjectsItems = didplayProjectsProjectsItems.join("");
        portfolioContent.innerHTML = didplayProjectsProjectsItems;
    }

What I have tried:

Help! I have tried too many things!!

Posted 23-Jun-21 3:08am

Emily Ryan

Updated 23-Jun-21 4:54am

Add a Solution

Comments

Chris Copeland 23-Jun-21 10:51am

Have you tried debugging your code, stepping through line-by-line in your browser, to see what happens at each stage? You should be able to place break-points in different parts of the code and be able to see each of the values as you step through.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Answer 1 · 2021-06-23T04:54:00

I can see an immediate problem in your code here: