我如何單擊 div 中的元素並獲取該元素的文本內容，該元素源自循環到 DOM 的數組中的 object

Question

我有一個 object 數組，我將其循環到 DOM 到一個 div 容器中。 使用 class 雇主容器。 我想單擊 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);
            }

```

Answer 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); }

 <div class="employer-container"></div>