获取锚标签的文本并将其显示在 html 标签中

Question

我正在使用下面的代码，它对我来说工作正常，用于一个锚标记。

<h1 id="h1">heading</h1>
<a type="button" id="demo" onclick="Func()">sign-up</a>

JS

function Func() {
    document.getElementById("h1").innerHTML = "sign-up";
}

如何为 3 或 4 个锚标记执行此操作？

我真正想要的是每次单击锚标签时获取其文本并将其显示在唯一的一个 <h1></h1> 标签中

任何答案将不胜感激 JS 或 JQuery

Answer 1

您可以将 class 添加到所有链接，并在此基础上为它们添加点击事件处理程序。

$(".buttons").click(e => $("#h1").text(e.currentTarget.textContent));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="h1">heading</h1>
<a type="button" class="buttons">sign-up</a>
<a type="button" class="buttons">sign-in</a>

Answer 2

你应该尝试JQuery喜欢

你的 h1 标签像

<h1 id="anchorText"> </h1>

你的锚标签如

<a type="button" id="demo">sign-up</a>
<a type="button" id="demo1" >Login</a>

现在在你的 jquery

$("a").click(function(){
    $("#anchorText").text($(this).text());
});

Answer 3

您可以在Func()中传递this来引用被点击的元素，然后根据您的方便获取该元素的innerHTML（或innerText）。

function Func(e) {
  document.getElementById("h1").innerHTML = e.innerHTML;
}

<h1 id="h1">heading</h1>
<a type="button" id="demo1" onclick="Func(this)">sign-up</a>
<a type="button" id="demo2" onclick="Func(this)">sign-in</a>

获取锚标签的文本并将其显示在 html 标签中

get text of anchor tag and display it in html tag

html

javascript

anchor

jquery