이 요소 내부의 텍스트 찾기

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>