Как правильно установить переменные ссылки в JavaScript?

Question

У меня есть 4 кнопки, которые создают текстовый вывод, так что кнопка «Перейти» идет по ссылке, указанной в этом текстовом выводе.Я все еще являюсь нубом из javascript и думаю на других языках, но есть ли способ превратить .innertext в переменную, основанную на последней нажатой кнопке?Это лучшая логика, которую я придумал, и хотел бы сделать ее более эффективным кодом.

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script>

<h1 id="changedText">Button changes this text</h1>


<button onclick="btn1()">Button1</button>
<button onclick="btn2()">Button2</button>
<button onclick="btn3()">Button3</button>
<button onclick="btn4()">Button4</button>
<br>

<button onclick="Go()">Go to Link Above</button>



<script>
function btn1() {
document.getElementById("changedText").innerText = "http://www.test- 
button-1.com";
}
function btn2() {
document.getElementById("changedText").innerText = "http://www.test- 
button-2.com";
}
function btn3() {
document.getElementById("changedText").innerText = "http://www.test- 
button-3.com";
}
function btn4() {
document.getElementById("changedText").innerText = "http://www.test- 
button-4.com";
}
</script>

Как вы можете видеть, мой код действительно грязный и не "идет" кссылка, чего мне не хватает?

Answer 1

Я думаю, вы можете попробовать использовать тег ввода и всякий раз, когда нажимаете на кнопку, вы присваиваете свойства значения глобальной переменной.Затем функция «Go» изменит ваш текст следующим образом:

    function Go(){
      document.getElementById("changedText").innerText = `http://www.test-${globalVariable}.com`;
    }

Answer 2

Только один клик, чтобы справиться. Не нужно определять 4 функции.

$("button").on("click", function() {
  var siteId = $(this).text().slice(-1);
  var url = "http://www.test-button-@.com";
  if (!isNaN(siteId)) {
    url = url.replace(/@/gi, siteId);
    $(this).text(url);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>

Answer 3

$("button").on("click", function() {
  var url = $(this).data("url");
  $("#changedText").text(url);
  $("#goButton").data("url", url)
});
$("#goButton").click(function() {
  window.location.href = $(this).data("url");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="changedText">Button changes this text</h1>

<button data-url="http://www.test-button-1.com">Button1</button>
<button data-url="http://www.test-button-2.com">Button2</button>
<button data-url="http://www.test-button-3.com">Button3</button>
<button data-url="http://www.test-button-4.com">Button4</button>

<button id="goButton">Go to Link Above</button>

Answer 4

function setLink(link) {
  document.getElementById("changedText").innerText = link;
}

function Go() {
  document.location.href = document.getElementById("changedText").innerText;
}

<h1 id="changedText">Button changes this text</h1>


<button onclick="setLink('http://www.test-button-1.com')">Button1</button>
<button onclick="setLink('http://www.test-button-2.com')">Button2</button>
<button onclick="setLink('http://www.test-button-3.com')">Button3</button>
<button onclick="setLink('http://www.test-button-4.com')">Button4</button>
<br>

<button onclick="Go()">Go to Link Above</button>