在 Javascript 中使用 getAttribute 和 addEventListener答案

【问题标题】：Using getAttribute with addEventListener in Javascript在 Javascript 中使用 getAttribute 和 addEventListener
【发布时间】：2018-02-15 12:35:56
【问题描述】：

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

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 中，我添加了一个我想返回游戏角色名称的点击事件：

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

这会返回一个空值：-(

问题：在 Javascript 中我如何使用 getAttribute 来获取 'character.name'（包含在

谢谢史蒂夫

【问题讨论】：

@T.J.Crowder — 我认为是孙子。
@Quentin：是的，我想是的。

标签： javascript addeventlistener getattribute

【解决方案1】：

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

this.querySelector('h2').textContent;

另见：

【讨论】：