JS - 'this'와 nextSibling - undefined는 객체가 아닙니다

Question

그래서 내 HTML에서는 버튼의 onclick 함수를 실행하고 있습니다. 그런 다음 클릭 한 요소의 형제 값을 innerHTML; 얻고 싶습니다. 그러나 오래된 'undefined is not object error'가 나타납니다.

<button onclick="helloWorld();"> 
Click Me 
</button> 
<p> 
Hello 
</p> 

그리고 내 자바 스크립트 :

<script> 
    function helloWorld() { 
     var justClicked = this; 
     var sibling = justClicked.nextSibling.textContent; 
     alert(sibling); 
    } 
</script> 

어떤 생각이 내 HTML 구조인가?

Answer 1

당신은 이벤트 처리기에 매개 변수로 this 참조를 전달할 수 있습니다

function helloWorld(justClicked) { 
 
    var sibling = justClicked.nextSibling.nextSibling.textContent; 
 
    console.log(sibling); 
 
}

<button onclick="helloWorld(this);"> 
 
    Click Me 
 
</button> 
 
<p> 
 
    Hello 
 
</p>

는 또한 <button>과 <p> 사이의 줄 바꿈이 형제로 간주되고 있습니다, 그래서 당신은 그것을 건너 뛰어야 할 것입니다.

Answer 2

문제은 특정 상황에서 키워드 this의 의미입니다.

here은 this이 (가) INVOKED HANDLER에 클릭 된 요소로 할당 된 것을 볼 수 있습니다. 문제는 다음과 같습니다.

hellowWorld(); 

그리고 그게 전부입니다. 일단 hellowWorld 함수 안에 있으면 this은 당신이 생각하는 것을 의미하지는 않습니다 (실제로는 창을 확인하고 볼 수 있습니다). JS

<button onclick="helloWorld(this);"> 

이상에서 :

넌 그래서 같은 this 참조를 통과시킴으로써 그것을 수정할 수

function helloWorld(elem) { 
    var justClicked = elem; 
    var sibling = justClicked.nextSibling.textContent; 
    alert(sibling); 
} 

편집 :. 또 (멋진) 방법 프렌으로 (상기 주석에서) this의 의미를 나타내는 javaScript의 Function.prototype.call() function을 사용하여 이렇게 :

<button onclick="helloWorld.call(this);">