在Javascript中将getAttribute与addEventListener一起使用

Question

In javascript I create some html to display 5 game characters in a div class named 'characters':

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>';
}

In Javascript I add a click event that i want to return the game character name:

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

This returns a null :-(

Question: in Javascript how do I use getAttribute to get 'character.name' ( what's contained in

Thanks steve

Answer 1

You can't. h2 is not an attribute . <h2> is an element .

this.querySelector('h2').textContent;

See also:

• Attribute
• Element
• querySelector
• type selectors
• textContent