点击链接时获取内部HTML

getting inner html of a link when clicked

本文关键字：内部 HTML 获取 链接      更新时间：2023-09-26

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

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

This Is My Function:

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

然而，当我点击链接时，paragraph tag内的内容变为未定义。

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

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

<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元素。

小提琴

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;
}

try this:

<a href="#" onclick="myfun(this)">Computer Science</a>
<p id="putpara"></p>
function myfun(obj) {
            document.getElementById("putpara").innerHTML = obj.innerHTML;
        }

可以这样做:

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

或者像这样(如果不在onload或ready函数中):

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

解释:

event.target几乎返回了事件被分派的对象。根据MDN:

事件对象的这个属性是事件被分派的对象上。这与事件不同。事件处理程序是在事件的冒泡或捕获阶段调用。

:

。目标属性可用于实现事件代表团。

小提琴。

相关文章：