将一项功能分配给 3 个指向外部网站的按钮答案

【问题标题】：assign one function to 3 buttons directing to outside websites将一项功能分配给 3 个指向外部网站的按钮
【发布时间】：2021-10-29 13:07:18
【问题描述】：

我找到了类似的答案，但不是我想要的。如何处理具有 1 个功能的 3 个按钮？如何将文档属性集成到解决方案中？

代码如下：

function gotoUrl() {
  window.location.assign("https://www.google.com/")
}

function gotoUrl1() {
  window.location.assign("https://www.yahoo.com/")
}

function gotoUrl2() {
  window.location.assign("https://www.youtube.com/")
}

<button class="one" onclick="gotoUrl()"> Google </button>
<button class="two" onclick="gotoUrl1()"> yahoo </button>
<button class="three" onclick="gotoUrl2()"> Youtube </button>

【问题讨论】：

为什么不直接使用链接呢？
onclick="gotoUrl('https://www.google.com')" 然后function gotoUrl(url) { window.location.assign(url) }。但是链接确实会更简单......
@JeremyThille，对于真正知道链接重定向到哪里的用户来说更简单更好。
这是我做的家庭作业的一部分，现在已经 3 天了 :-)
作业是否也建议使用onclick？无论您上什么课程，都会教授非常糟糕的做法。

标签： javascript button window.location

【解决方案1】：

你可以在函数中输入params，它是函数运行时包含的变量。这是您仅使用 1 个函数的修改代码：

<!-- html -->
<button class="one" onclick="gotoUrl('https://www.google.com')"> Google </button>
<button class="two" onclick="gotoUrl('https://www.yahoo.com')"> yahoo </button>
<button class="three" onclick="gotoUrl('https://www.youtube.com')"> Youtube </button>

// javascript
function gotoUrl(link /*link is a param, now we can use it as a variable in our function*/){
     window.location.assign(link)
}

w3schools 参数：https://www.w3schools.com/js/js_function_parameters.asp

【讨论】：

非常感谢。你能解释一下函数内的“链接”参数是如何引用每个按钮的吗？

【解决方案2】：

function gotoUrl() {
    window.open("https://www.google.com/")
}
            
function gotoUrl1() {
    window.open("https://www.yahoo.com/")
}
            
function gotoUrl2() {
    window.open("https://www.youtube.com/")
}

<button class="one" target="_blank" onclick="gotoUrl()"> Google </button>
<button class="two" target="_blank" onclick="gotoUrl1()"> yahoo </button>
<button class="three" target="_blank" onclick="gotoUrl2()"> Youtub </button>

open() 方法会根据您的浏览器设置和参数值打开一个新的浏览器窗口或一个新选项卡。

语法：

window.open(URL, name, specs, replace)

更多详情请点击：window.open

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
所有按钮只需分配一个功能。