In my HTML code, I have elements that when clicked on new content will show up. I am adding the new content dynamically with JavaScript by filtering through an array of objects and then displaying the HTML content via innerHTML. My problem is I want to be able to click on the new content and have even more content show up.
Through research, I figured out that in order to have click events on dynamically added content I need to do event delegation. I redid my Javascript code to work with event delegation. But I still can't access the new elements so that when they are clicked I can display other content.
I have tried accessing classes or ids attached to the new content and they just show up as null. So, meaning I can't select each element to attribute other content to show up when clicked the dynamically added content.
Is there some solution to this or another way entirely to achieve what I am trying to do?
My HTML code:
<div id="portfolio_content_container">
<div class="portfolio__grid">
<!--
<a href="#" id="TAFE" class="portfolio__item filter-projects TAFE" data-id="TAFE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="TAFE logo" />
<div class="portfolio__clientName">
<h3 id="TAFE" class="portfolio__clientName-text">TAFE (Theatre Arts For Everyone)</h3>
</div> <!--
</a>
<!--
<a href="#" id="CAHQ" class="portfolio__item filter-projects CAHQ" data-id="CAHQ">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="CAHQ Brochure" />
<div class="portfolio__clientName">
<h3 id="CAHQ" class="portfolio__clientName-text">College Admissions HQ</h3>
</div> <!--
</a>
<!--
<a href="#" id="PWC" class="portfolio__item filter-projects PWC" data-id="PWC">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="pilates wellness center logo" />
<div class="portfolio__clientName">
<h3 id="PWC" class="portfolio__clientName-text">Pilates Wellness Center of York</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/jane_daisy_general/jane_daisy_general.html" class="portfolio__item filter-projects" data-id=JDG">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="jane dasie general logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Jane Daisy General</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/secondEncounter/secondEncounter.html" class="portfolio__item filter-projects" data-id="secondEncounter">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="secondEncounter logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">secondEncounter</h3>
</div> <!--
</a>
<!--
<a href="#" class="portfolio__item filter-projects" data-id="DB">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Dobbs & Bishop" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Dobbs & Bishop Fine Cheese</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/yorkfest/yorkfest.html" class="portfolio__item filter-projects" data-id="Yorkfest">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Yorkfest Logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Yorkfest</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/lish/lish.html" class="portfolio__item filter-projects" data-id="Lish">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Lish Logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Lish</h3>
</div> <!--
</a>
<!--
<a href="#" id="PE" class="portfolio__item filter-projects PE" data-id="PE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Columbia-Wrightsville Bridge Book Cover" />
<div class="portfolio__clientName">
<h3 id="PE" class="portfolio__clientName-text">Photo Essays</h3>
</div> <!--
</a>
</div> <!--
<div class="button-container-bottom">
<a class="filter-projects active" type="button" data-id="graphicDesign">Graphic Desing</a>
<a class="filter-projects" type="button" data-id="webDesign">Web Design</a>
</div>
</div> <!--
My JavaScript:
const projectCards = [
{
id: 1,
dataId: "TAFE",
title: "Identity System",
pgTitle: "TAFE (Theatre Arts For Everyone)",
category: "TAFE",
img: "../img/image-plane.jpg",
url: "../pages/graphic_design/tafe/tafe_company_identitySystem.html",
},
{
id: 2,
dataId: "TAFE",
title: "Audition/Show Posters",
pgTitle: "TAFE (Theatre Arts For Everyone)",
category: "TAFE",
img: "../img/image-plane.jpg",
url: "../pages/graphic_design/tafe/tafe_show_posters.html",
},
{
id: 3,
dataId: "TAFE",
title: "Programs",
pgTitle: "TAFE (Theatre Arts For Everyone)",
category: "TAFE",
img: "../img/image-plane.jpg",
url: "../pages/graphic_design/tafe/tafe_show_programs.html",
},
{
id: 4,
dataId: "TAFE",
title: "Tickets",
pgTitle: "TAFE (Theatre Arts For Everyone)",
category: "TAFE",
img: "../img/image-plane.jpg",
url: "../pages/graphic_design/tafe/tafe_show_tickets.html",
},
{
id: 5,
dataId: "TAFE",
title: "Postcards",
pgTitle: "TAFE (Theatre Arts For Everyone)",
category: "TAFE",
img: "../img/image-plane.jpg",
url: "../pages/graphic_design/tafe/tafe_newsletter.html",
},
{
id: 6,
dataId: "TAFE",
title: "Newsletter",
pgTitle: "TAFE (Theatre Arts For Everyone)",
category: "TAFE",
img: "../img/image-plane.jpg",
url: "../pages/graphic_design/tafe/tafe_postcards.html",
},
{
id: 7,
dataId: "CAHQ",
title: "Identity System",
pgTitle: "College Admissions HQ, LLC",
category: "CAHQ",
img: "../img/image-currency.jpg",
url: "../pages/graphic_design/cahq/cahq_identity_system.html"
},
{
id: 8,
dataId: "CAHQ",
title: "Marketing Materials",
pgTitle: "College Admissions HQ, LLC",
category: "CAHQ",
img: "../img/image-currency.jpg",
url: "../pages/graphic_design/cahq/cahq_marketing_materials.html",
},
{
id: 9,
dataId: "CAHQ",
title: "Website Icons",
pgTitle: "College Admissions HQ, LLC",
category: "CAHQ",
img: "../img/image-currency.jpg",
url: "../pages/graphic_design/cahq/cahq_website_icons.html",
},
{
id: 10,
dataId: "PWC",
title: "Identity System",
pgTitle: "Pilates Wellness Center of York",
category: "PWC",
img: "../img/image-restaurant.jpg",
url: "../pages/graphic_design/pilates/pwc_company_identitySystem.html",
},
{
id: 11,
dataId: "PWC",
title: "Marketing Materials",
pgTitle: "Pilates Wellness Center of York",
category: "PWC",
img: "../img/image-restaurant.jpg",
url: "../pages/graphic_design/pilates/pwc_marketing_materials.html",
},
{
id: 12,
dataId: "PE",
title: "Columbia-Wrightsville Bridge",
pgTitle: "Photo Essays",
category: "PE",
img: "../img/image-restaurant.jpg",
url: "../pages/graphic_design/photo_essays/columbia-wrightsville_bridge.html",
},
{
id: 13,
dataId: "PE",
title: "Shift Focus",
pgTitle: "Photo Essays",
category: "PE",
img: "../img/image-currency.jpg",
url: "../pages/graphic_design/photo_essays/shift_focus.html",
},
{
id: 14,
dataId: "PE",
title: "A Commuter's View",
pgTitle: "Photo Essays",
category: "PE",
img: "../img/image-plane.jpg",
url: "../pages/graphic_design/photo_essays/a_commuters_view.html",
}
];
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: "TAFE",
img: "../img/image-plane.jpg",
},
{
id: 2,
dataId: "CAHQ",
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: "CAHQ",
img: "../img/image-currency.jpg",
},
{
id: 2,
dataId: "PE",
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: "PE",
img: "../img/image-restaurant.jpg",
},
];
let portfolioHeadingContainer = document.getElementById('portfolio__headingContainer');
let portfolioContentContainer = document.getElementById('portfolio_content_container');
let buttonContainer = document.querySelector('button-container');
let filterProjects = document.querySelectorAll('.filter-projects');
let projectsBtn = document.querySelectorAll('.projects-btn');
let portfolioGrid = document.querySelector('.portfolio__grid');
let portfolioContent = document.querySelector('.portfolio__content');
let selectedCard;
portfolioGrid.addEventListener('click', function(e) {
let target = e.target;
if(target.className = 'filter-projects') {
if(filterProjects.id = 'TAFE') {
const projectCategory = projectCards.filter(function(projectItem) {
if(projectItem.category === target.id) {
return projectItem;
}
});
if(target.className === "all") {
displayProjectItems(projectCards);
}
else {
displayProjectItems(projectCategory);
}
} else if(filterProjects.id = 'CAHQ') {
const projectCategory = projectCards.filter(function(projectItem) {
if(projectItem.category === target.id) {
return projectItem;
}
});
if(target.className === "all") {
displayProjectItems(projectCards);
}
else {
displayProjectItems(projectCategory);
}
} else if(filterProjects.id = 'PWC') {
const projectCategory = projectCards.filter(function(projectItem) {
if(projectItem.category === target.id) {
return projectItem;
}
});
if(target.className === "all") {
displayProjectItems(projectCards);
}
else {
displayProjectItems(projectCategory);
}
} else if(filterProjects.id = 'PE') {
const projectCategory = projectCards.filter(function(projectItem) {
if(projectItem.category === target.id) {
return projectItem;
}
});
if(target.className === "all") {
displayProjectItems(projectCards);
}
else {
displayProjectItems(projectCategory);
}
}
}
});
function displayProjectItems(projectItems) {
let displayProjectItem = projectItems.map(function(item) {
return `<a href="#" id="${item.dataId}" data-id="${item.dataId}" class="portfolio__item filter-projects">
<img class="portfolio__image" src="${item.img}" alt="TAFE Logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">${item.title}</h3>
</div> <!-- end portfolio__clientName -->
</a>`;
});
let displayTitle = projectItems.map(function(titleItem) {
return `<div id="headingContent" class="entry-image noIMG hide"><h2 class="text-title entry-imgText">${titleItem.pgTitle}</h2></div>`;
});
displayProjectItem = displayProjectItem.join("");
portfolioGrid.innerHTML = displayProjectItem;
displayTitle = displayTitle.join("");
portfolioHeadingContainer.innerHTML = displayTitle;
}
function projectProjects(projectProjectsItems) {
let didplayProjectsProjectsItems = projectProjectsItems.map(function(item) {
return `
<div id="${item.dataId}" class="${item.id}"><h2 class="projects__heading">Identity System</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: 2014</p>
<p class="client">Client: College Admissions HQ, LLC</p>
<p class="role">Role: Graphic Designer</p>
<p class="project-type">Project Type: Branding, Logo</p>
<p class="programs">Programs Used: Ai</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>`;
});
let displayHeading = projectItems.map(function() {
return `<div id="headingContent" class="heading-switch noIMG hide"></div>`;
});
didplayProjectsProjectsItems = didplayProjectsProjectsItems.join("");
portfolioGrid.innerHTML = didplayProjectsProjectsItems;
displayHeading = displayHeading.join("");
portfolioHeadingContainer.innerHTML = displayHeading;
}
What I have tried:
I have tried lots of different things and nothing is working! If someone has a solution that would be helpful even if it is a totally different way of achieving what I'm after.
Submit an article or tip