Javascript 如何单击div中的元素并获取该元素的文本内容，该元素是从循环到DOM的数组中的对象派生的

我有一个对象数组，我将其循环到DOM中的一个div容器中。使用类容器。 我想单击DOM中的每个元素，并获取每个元素的文本内容。如何使用javascript实现这一点

下面是我用来将其循环到DOM的JavaScript代码

const employersContainer = document.querySelector('.employer-container');

const arrOfObj = [
     {
      name: 'Joe',
      occupation: 'Footballer' 
     },
     {
      name: 'Alex',
      occupation: 'Doctor' 
     },
     {
      name: 'Sam',
      occupation: 'Superhero' 
     },
];


            const employersMapToDOM = () => {
            var content = '';
            for (let i = 0; i < arrOfObj.length;i++) {
            content +=`
                    <div class="employee-case" onclick="getThisTagValue()">
                        <div>
                            <h4 class="person">${arrOfObj[i].name}</h4>
                            <p class="work">${arrOfObj[i].occupation}</p>
                        </div>                   
                 </div>`;
            }


            employersContainer.innerHTML = content;
      
            }

            employersMapToDOM();


            const getThisTagValue = () => {
                    const employeeCase = document.querySelector('.employee-case');

                    console.log(employeeCase.textContent);
            }

```

const employers container=document.querySelector（“.employer container”）；
const arrOfObj=[
{
名字：'乔'，
职业：“足球运动员”
},
{
姓名：“Alex”，
职业：“医生”
},
{
姓名：“山姆”，
职业：“超级英雄”
},
];
const employersMapToDOM=（）=>{
var内容=“”；
for（设i=0；i${arrOfObj[i].职业}

`;
}
EmployerContainer.innerHTML=内容；
}
employersMapToDOM（）；
常量getHistAgValue=（）=>{
const employeeCase=document.querySelector（'.employeeCase'）；
console.log（employeeCase.textContent）；
}
```

在循环中，您可以执行

arrOfObj.name

。但是

arrOfObj

是一个数组，没有

name

属性。您需要先提取

人物

，然后使用其属性：

const employers container=document.querySelector（“.employer container”）；
警察arrOfObj=[{姓名：'乔'，职业：'足球运动员'}，
{姓名：'Alex'，职业：'Doctor'}，
{姓名：'山姆'，职业：'超级英雄'}]；
const employersMapToDOM=（）=>{
var内容=“”；
for（设i=0；i${person.accountry}

`;
}
EmployerContainer.innerHTML=内容；
}
employersMapToDOM（）；
const getHistAgValue=（employeeCase）=>{
设str=employeeCase.textContent；
//如果要删除换行符和额外空格，请执行以下操作：
str=str.replace（/\s+/g'，）.trim（）；
console.log（str）；
}

---

正常。谢谢你。但是为了得到答案，我想点击每个人的员工案例以及他们的作品。也就是说，如果我点击Joe的员工案例，Joe的工作是足球运动员，它应该返回文本内容“Joe footballer”；但我每次这样做，我点击它们，它们都会返回“joe footballer”。我点击Alex或Sam，仍然会得到“joe footballer”（我在员工案例中使用了“onclick（）”方法）。现在这是我的问题。我想点击它们中的每一个，当我点击时，让它返回它们自己的值。（如果我单击Alex，我将获得Alex的文本内容。如果我单击Sam，我将获得Sam的内容等等）请使用当前代码更新您的问题，包括设置单击事件侦听器的部分，这将更容易。好的。我已经这样做了。好的，我编辑了答案。请注意，我在

onclick=“GetHistagValue”（此）中添加了
this
“

以便我们知道单击了哪个div