この要素の中のテキストを見つける

Question

私はかなり簡単な操作をしたいと思っています：liをクリックすると、JQueryではなくJavaScriptを使ってテキストが内部に取り込まれます。私が理解できないのは、innerHTMLの入手方法です。

function enable() { 
    document.addEventListener('click', e => { 
    if (e.target.classList.contains('refine-menu-li')) { 
     var selected = this.innerHTML; 
     console.log('stuff'); // Working 
     console.log(selected); // Not working 
    } 
    }); 
} 

は私がclassを使用しています問題であり、そうfor -loopが必要ですか？または、thisは試して使用するのに愚かなことですか？

ありがとうございます！

Answer 1

をお試しください：

document.getElementById("js-list") 
 
     .addEventListener("click",function(e) { 
 
      if(e.target && e.target.nodeName == "LI") { 
 
       console.log(e.target.innerHTML); 
 
      } 
 
     });

<ul id="js-list"> 
 
    <li>value1</li> 
 
    <li>value2</li> 
 
    <li>value3</li> 
 
</ul>

Answer 2

アロー機能は、それらがで宣言されている文脈からthisを取り込む。

this.innerHTMLあなたが探しているinnerHTMLではありません。

おそらくe.target.innerHTMLが必要です。

---

あなたは矢印の機能を使用していなかった場合は、this意志はあなたが望んでいた値ではないでしょう。イベントハンドラは、イベントをトリガした要素ではなく、バインドされている要素のコンテキスト（この場合はdocument）で呼び出されます。

Answer 3

あなたは矢印の機能を使用せずに、このような何かを試みることができるこの

function enable() { 
 
    document.addEventListener('click', e => { 
 
    
 
    var current = e.target; 
 
    
 
    if (e.target.classList.contains('refine-menu-li')) { 
 
     var selected = current.innerHTML; 
 
     console.log('stuff'); // Working 
 
     console.log(selected); // Not working 
 
    } 
 
    }); 
 
} 
 

 
enable();

<ul> 
 
    <li class='refine-menu-li a'>1 </li> 
 
    <li class='refine-menu-li b '>2</li> 
 
    <li class='refine-menu-li c '>3</li> 
 
    <li class='refine-menu-li d'>4</li> 
 
</ul>