オブジェクトの配列があり、それを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);
}
```
ループでは、あなたはします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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加