javascript - 位于 div 中的 Onclick 按钮

Question

我试图在 HTML 中单击 3 个按钮时为它们创建不同的超链接。我环顾四周，有很多使用 JavaScript 来执行此操作的示例 - 这样会更好吗？为什么？我只希望按钮加载不同的网页。谢谢

3 个按钮的当前 HTML 代码:

<div id="buttons">
        <button class="btn">Entry forms</button>
        <button class="btn">Scoresheets</button>
        <button class="btn">Results</button>
</div>

Answer 1

您可以通过简单的方式或困难的方式来做到这一点。

简单的方法

让他们链接。给链接 href 属性。你在这里的工作完成了。如果您愿意，您甚至可以将它们设置为看起来像按钮的样式 - 但链接可以跨浏览器工作，在任何版本中，有或没有 JS。

<a href="yourpage.html" class="btn">Entry forms</a>

这是一个演示:

.btn {
        display: inline-block;
        padding: 5px 10px 5px 10px;
        background: gray;
        background: linear-gradient(rgb(240,240,240), rgb(200,200,200));
        border: 1px solid gray;
        border-radius: 3px;
        color: black;
    }

<a href="yourpage.html" class="btn">Entry forms</a>

艰难的道路

任一 onclick 属性:

<button class="btn" onclick="location.href='yourpage.html'">Entry forms</button>

或者动态添加监听器:

document.getElementById("my-button").addEventListener("click", function() {
    location.href = 'yourpage.html';
});