当试图获取innerHTML时，结果总是未定义的

Question

我正在生成一些div，并使用函数将其附加到DOM

//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()

当我点击其中一个结果时，我正试图登录到控制台，一些innerHTML。因此，我总是得到"未定义"。我知道我错过了什么，但我似乎不知道是什么。如有任何帮助，我们将不胜感激。

function myFunction(event) {
const clickedCat = event.target.nodeName;
console.log(clickedCat);
const details = clickedCat.innerHTML
console.log(details)
}

Answer 1

来自David784的评论，

我不必要地将.nodeName添加到event.target我用.ninnerHTML替换了它，我可以检索我需要的数据。

function myFunction(event) {
const clickedCat = event.target.innerHTML;
console.log(clickedCat);
const details = clickedCat.innerHTML
console.log(details)
}