Question

我有一个HTML链接和一个p标签，如下所示：

<a href="#" onclick="myfun()">Computer Science</a>
<p id="putpara"></p>

这是我的功能：

function myfun() {
            document.getElementById("putpara").innerHTML = this.innerHTML;

        }

但是，当我点击该链接时，paragraph tag内的内容会更改为未定义。

似乎是一个愚蠢的错误，我正在制作.....新手javascript ....

Answer 1

一种解决方案是在您的函数中发送this参数，如下所示：

<强> HTML

<a href="#" onclick="myfun(this)">Computer Science</a>
<p id="putpara"></p>

<强> JS

window.myfun = function(obj) {
            document.getElementById("putpara").innerHTML = obj.innerHTML;
}

this指的是DOM元素。

fiddle

Answer 2

样本中this中的

myfun指的是全局对象，在本例中是Window - 对象。

如果您为a - 标记了ID link，则可以像这样修复：

function myfun() {
    document.getElementById("putpara").innerHTML = document.getElementById("link").innerHTML;
}

如果您想了解更多有关遇到此问题的原因，请阅读JavaScript中的闭包。

修改

正如对我的回答的评论所指出的，更可重用的解决方案是将HTML更改为：

<a href="#" onclick="myfun(this)">Computer Science</a>

在这种情况下，将使用相应的DOM元素作为参数调用onclick - 事件。

然后更改JavaScript函数，以便它接受传入的元素：

function myfun(element) { document.getElementById("putpara").innerHTML = element.innerHTML; }

Answer 3

试试这个：

<a href="#" onclick="myfun(this)">Computer Science</a>
<p id="putpara"></p>

function myfun(obj) {
            document.getElementById("putpara").innerHTML = obj.innerHTML;

        }

Answer 4

这样做可能：

function myfun() {
    document.getElementById("putpara").innerHTML = event.target.innerHTML;
}

或者像这样（如果它不在onload或ready函数内）：

window.myfun = function() {
    document.getElementById("putpara").innerHTML = event.target.innerHTML;
}

<强>解释

event.target几乎返回调度事件的对象。根据MDN：

事件对象的此属性是调度事件的对象上。它与事件处理程序的event.currentTarget不同在鼓泡或捕捉事件的阶段被召唤。

和

可以使用event.target属性来实现事件一行。

Fiddle.

单击时获取链接的内部html

4 个答案: