如何使用JavaScript替换按钮的location.href链接

你的代码失效原因是：<button> 元素本身没有 href 属性，你原来的跳转逻辑写在 onclick 事件的 location.href 里，所以直接修改 href 不会生效。

可以用两种方法修复：

方法一：修改按钮的 onclick 事件内容 #

直接替换按钮 onclick 事件里的跳转逻辑：

<button onclick="changeURL()">change link</button>
<button onclick="location.href='https://google.com'" id="link">go to link</button>

<script>
function changeURL(){
     var newURL = "https://youtube.com";
     // 重新绑定onclick事件，替换跳转地址
     document.getElementById("link").onclick = function() {
         location.href = newURL;
     };
}
</script>

方法二：改用带 href 的链接模拟按钮（推荐） #

如果想通过修改 href 控制跳转，可将按钮换成 <a> 标签，用CSS模拟按钮样式，逻辑更直观：

<button onclick="changeURL()">change link</button>
<a href="https://google.com" id="link" style="display:inline-block; padding: 6px 12px; border:1px solid #ccc; background:#f5f5f5; text-decoration:none; color:#333; cursor:pointer;">go to link</a>

<script>
function changeURL(){
     var newURL = "https://youtube.com";
     document.getElementById("link").href = newURL;
}
</script>

内容的提问来源于stack exchange，提问作者AW Soft