I am generating some div's and appending to the DOM with this function
//Run forEach method on newObj(cats from local storage) to populate and append template to the DOM
function getTheCats() {
//Limiting the results to 3. Probably better way to do this.
newObj.slice(0, 3).forEach(cat => {
const catEl = document.createElement('div')
catEl.classList.add('cat-detail')
catEl.innerHTML = `
<div class="img-id-container" id="pointer-control" onclick="getCatDeets()">
<img class='cat-image' src='${cat.thumbnail_url}' alt="Cat Pic"/>
<h3 class="id-left">Cat ${cat.id}</h3>
</div>
<p class="birthday-left">${cat.birthdate}</p>
`
mainLeft.appendChild(catEl)
})
}
getTheCats()
I am trying to log to console, some of the innerHTML when I click on one of the results. I always get 'undefined' as a result. I know I am missing something, but I can't seem to figure out what. Any help would be greatly appreciated.
function myFunction(event) {
const clickedCat = event.target.nodeName;
console.log(clickedCat);
const details = clickedCat.innerHTML
console.log(details)
}
From David784 in the comments,
I unnecessarily added .nodeName to event.target I replaced it with .innerHTML and I am able to retrieve the data I need.
function myFunction(event) {
const clickedCat = event.target.innerHTML;
console.log(clickedCat);
const details = clickedCat.innerHTML
console.log(details)
}