javascript - 在 Javascript 中使用 getAttribute 和 addEventListener

Question

在 javascript 中，我创建了一些 html 来在名为“characters”的 div 类中显示 5 个游戏 Angular 色:

var element = document.getElementsByClassName('characters');
for(var i in characters){
    // build the character list
    element[0].innerHTML += '<div class="char-container"><img 
    src="'+characters[i].img.default+'" alt="'+characters[i].name+'">
    <h2>'+characters[i].name+'</h2><span class="type '+characters[i].type+'">
    </span></div>';
}

在 Javascript 中，我添加了一个点击事件，我想返回游戏 Angular 色名称:

var element = document.querySelectorAll ('.characters, .char-container');
let index = 0;
console.log ("element "+element.length);
for( index=0; index < element.length; index++ ) {
    clickerFn = function(){
        var attribute = (this).getAttribute('h2');
        alert("Hello World! +name "+attribute);
    }
    element[index].addEventListener('click', clickerFn, false);
} // for

这将返回 null :-(

问题:在 Javascript 中，如何使用 getAttribute 来获取“character.name”(其中包含的内容)

谢谢史蒂夫

Answer 1

你不能。 h2是不是属性。 <h2>是一个元素。

this.querySelector('h2').textContent;

另请参阅:

• Attribute
• Element
• querySelector
• type selectors
• textContent