如何单击 div 中的元素并获取该元素的文本内容，该文本内容源自循环到 DOM 的数组中的对象答案

【问题标题】：How do i click an element in a div and get the text content of that element which is derived from an object in array which was looped to the DOM如何单击 div 中的元素并获取该元素的文本内容，该文本内容源自循环到 DOM 的数组中的对象
【发布时间】：2021-03-26 13:15:33
【问题描述】：

我有一个对象数组，我将其循环到 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);
            }

```

【问题讨论】：

标签： javascript html arrays loops

【解决方案1】：

在循环中，您执行arrOfObj.name。但是arrOfObj 是一个数组，并且没有name 属性。您需要先提取person，然后使用它的属性：

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++) {
    var person = arrOfObj[i];
    content += `<div class="employee-case" onclick="getThisTagValue(this)">
                  <div>
                    <h4 class="person">${person.name}</h4>
                    <p class="work">${person.occupation}</p>
                  </div>                   
                </div>`;
  }
  employersContainer.innerHTML = content;
}

employersMapToDOM();

const getThisTagValue = (employeeCase) => {
  let str = employeeCase.textContent;
  // If you want to remove line breaks and extra spaces:
  str = str.replace(/\s+/g, ' ').trim();
  console.log(str);
}

&lt;div class="employer-container"&gt;&lt;/div&gt;

【讨论】：

好的。感谢那。但要得到答案，我想单击每个人的员工案例及其显示的作品。也就是说，如果我单击工作是足球运动员的 Joe 的员工案例，它应该返回文本内容“Joe Footballer”；但是我每次这样做并单击所有这些时，它们都返回“乔足球运动员”。
我正在点击 Alex 或 Sam，但我仍然得到“joe footballer”（我在员工案例中使用了“onclick()”方法）。现在这是我的问题。我想要单击它们中的每一个，当我这样做时，让它返回它们自己的值。（如果我点击 Alex，我会得到 Alex 的文本内容。如果我点击 Sam，我会得到 Sam 的内容等等）
请用您当前的代码更新您的问题，包括您设置点击事件监听器的部分，这样会更容易
好的，我编辑了答案。请注意，我在onclick="getThisTagValue(this)" 中添加了this，以便我们知道点击了哪个div
谢谢布莱克斯。你已经拯救了这一天，我想在 2 天前尝试“这个”。但我想我跳过了我的想法。非常感谢你。我会做更多关于如何使用“this”的研究