値のデータ属性のネイティブJavaScriptを取得

Question

私はネイティブjsを使用しています。私がクリックしたすべての要素をdata-atributeから取得する必要があります。

window.onload = function() { 

    let btn = document.getElementsByClassName('btn'); 

    for(let i = 0; i < btn.length; i++) { 
     btn[i].addEventListener("click" , function(e) { 
      let dataBtn = e.getAttribute('data-btn'); 
      console.log(dataBtn); 
     }); 
    } 

}; 

しかし、私は

は私がネイティブJSでこれを取得し、使用することができている（e.getAttributeは関数ではありません）エラーが出ますか？

Answer 1

イベントハンドラ関数で現在クリックされている要素の'data-btn'属性にアクセスするには、this.getAttribute('data-btn')を呼び出すか、btn[i].getAttribute('data-btn');を呼び出してアクセスします。

コード：

let btn = document.getElementsByClassName('btn'); 
 

 
for (let i = 0, len = btn.length; i < len; i++) { 
 
    btn[i].addEventListener('click' , function() { 
 
    let dataBtn = this.getAttribute('data-btn'); 
 
    console.log(dataBtn); 
 
    }); 
 
}

<a class="btn btn-default" data-btn="1" href="#" role="button">Link</a> 
 
<button class="btn btn-default" data-btn="2" type="submit">Button</button> 
 
<input class="btn btn-default" data-btn="3" type="button" value="Input"> 
 
<input class="btn btn-default" data-btn="4" type="submit" value="Submit">