Question

所以在我的html中，我正在运行一个按钮的功能。然后我想获得被点击的元素的兄弟innerHTML;值，但是我得到旧的＆＃39; undefined不是对象错误＆＃39;。这是我的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的含义。

您可以看到here this被指定为点击入侵者处理器中的元素。问题是：您的案例中的处理程序是：

hellowWorld();

就是这样。一旦你进入hellowWorld函数this并不意味着你的想法（你可以检查并看到它实际上是窗口）。

您可以通过传递this引用来更正：

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

并在JS中：

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

编辑：另一种（更好的）方式是（正如JefréN。在评论中所述）通过使用javaScript的Function.prototype.call() function来表示this的含义：

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

Answer 2

您可以将this参考作为参数传递到您的事件处理程序中：

＆＃13;

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

＆＃13;

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

＆＃13;

另请注意，<button>和<p>之间的换行计算为兄弟，因此您必须跳过它。

JS - 使用＆＃39;这个＆＃39;和nextSibling - undefined不是一个对象

2 个答案: