получить текст тега привязки и отобразить его в теге 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

вы должны попробовать 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 2

Вы можете передать this в Func() для ссылки на элемент, по которому щелкнули, и затем получить 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>

Answer 3

Вы можете добавить 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>