JS-使用“ this”和nextSibling-未定義不是對象

Question

因此，在我的html中，我正在運行一個按鈕的onclick函數。 然后，我想獲取innerHTML; 單擊的元素的同級元素的值，但是我得到的是舊的“未定義不是對象錯誤”。 這是我的html結構：

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

而我的javascript：

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

有任何想法嗎？

Answer 1

問題是在特定上下文中關鍵字this的含義。

您可以在此處看到， this被分配為在IN INVOKED HANDLER中單擊的元素。 問題是：您的情況下的處理程序是：

hellowWorld();

就這樣。 進入hellowWorld函數后， this並不意味着您認為它會做什么（您可以檢查並查看它實際上是窗口）。

您可以通過傳遞this引用來更正它 ，如下所示：

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

在JS中：

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

編輯：（如JefréN在注釋中說的）另一個（更好）的方式是表示的意思this使用JavaScript的Function.prototype.call（）函數，就像這樣：

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

Answer 2

您可以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>之間的換行符被視為同級，因此您必須跳過它。