如何使按钮像链接一样，但在新标签上

Question

我正在使用一个按钮进入新链接，但继续进行预览。

我尝试使用：

<button type="button" onclick="window.location.href = 'www.typing.com' target = '_blank'">Typing.com</button>

我希望它会把我带到一个新标签，但是发生的是这个错误：

uckulting语法：意外的标识符(：Line 112(

当我什至没有第112行。

Answer 1

以下代码行不起作用，因为您无法正确引用它：

<button type="button" onclick="window.location.href = 'https://www.typing.com' target = '_blank'">Typing.com</button>

对于初学者，这不是有效的JavaScript。

window.location.href = 'https://www.typing.com' target = '_blank'

您尚未定义一个称为target的变量，您应该在作业后放置半彩。

我认为您打算写这篇文章：

<button type="button" onclick="window.location.href='https://www.typing.com'" target="_blank" id="myButton">typing.com</button>

即使您将其更改为预期，它也无法正常工作，因为您不能在按钮上使用锚定标签的目标属性，也无法使用分配给window.location.href。

。

---

如果您必须使用内联脚本，请使用window.open函数，然后添加第二个参数("_blank"(，例如：

<button type="button" onclick="window.open('https://www.typing.com', '_blank');" id="myButton">typing.com</button>

---

如果您要使用内联脚本制作按钮的行为，那么为什么不使用像按钮这样的实际链接和样式？

将锚定标签的target属性设置为_blank，例如：

<a href="https://www.typing.com" target="_blank" class="button">Typing.com</a>

这是(蓝色(按钮的一些基本样式：

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  background-color: #03A9F4;
}

---

如果要沿JavaScript路线沿着JavaScript路线进行，请忽略前两个方法，然后将单击事件添加到您的按钮元素，例如：

document.querySelector(".button").addEventListener("click", () => {
  window.open("https://www.typing.com", "_blank")
});

注释和信息：

• _blank参数是在新标签中打开所必需的。
• 您必须使用for(或forEach(循环将单击事件添加到每个按钮。
• 您的" link" 如果用户已安装了弹出式阻滞剂(扩展程序(。

祝你好运。

Answer 2

请尝试以下代码代码段。

<button type="button" onclick="window.open('www.yoursite.com');"
 id="myButton">typing.com</button>