如何在javascript中正确设置链接变量？

我有4个按钮来创建一个文本输出，这样一个“Go”按钮就会指向文本输出中给出的链接。 我仍然是一个JavaScriptNoob，正在用其他语言思考，但是有没有一种方法可以根据上次按下的按钮将.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>

按钮更改此文本
按钮1
按钮2
按钮3
按钮4


转到上面的链接
函数btn1（）{
document.getElementById（“changedText”）.innerText=”http://www.test- 
按钮-1.com”；
}
函数btn2（）{
document.getElementById（“changedText”）.innerText=”http://www.test- 
按钮-2.com”；
}
函数btn3（）{
document.getElementById（“changedText”）.innerText=”http://www.test- 
按钮-3.com”；
}
函数btn4（）{
document.getElementById（“changedText”）.innerText=”http://www.test- 
按钮-4.com”；
}

正如您所看到的，我的代码非常脏，并且没有“转到”链接，我缺少了什么？

函数设置链接（链接）{
document.getElementById（“changedText”）.innerText=link；
}
函数Go（）{
document.location.href=document.getElementById（“changedText”）.innerText；
}

按钮更改此文本
按钮1
按钮2
按钮3
按钮4


转到上面的链接

只需单击处理即可。无需定义4个函数

$（“按钮”）。在（“单击”，函数（）{
var siteId=$（this.text（）.slice（-1）；
变量url=”http://www.test-button-@",；
如果（！isNaN（站点ID））{
url=url.replace（/@/gi，siteId）；
$（此）.text（url）；
}
});

按钮1
按钮2
按钮3
按钮4
$（“按钮”）。在（“单击”，函数（）{
var url=$（this）.data（“url”）；
$（“#changedText”）.text（url）；
$（“goButton”）.data（“url”，url）
});
$（“#goButton”）。单击（函数（）{
window.location.href=$（this.data（“url”）；
})

按钮更改此文本
按钮1
按钮2
按钮3
按钮4
转到上面的链接
我想您可以尝试使用输入标记，每当单击按钮时，您都可以将值属性指定给全局变量。
然后，“Go”功能将您的文本更改为：

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

你能解释一下这里的逻辑吗？我对它的工作原理有点困惑。当你点击任何带有“数据url”属性的按钮（在这里阅读更多关于这个属性的信息：）JQuery读取这个属性（这一行：var url=$（this.data（“url”）；）并在id为“changedText”的元素中呈现它（这一行：$（“#changedText”）.text（url）；）我添加了Go函数，但由于某种原因，我的整个javascript都崩溃了。现在，我没有得到任何文本更改。这与来源有关吗？