JavaScript on Click 函数根本不起作用

Question

第二个函数，应该带我去player2.html，由于某种原因不起作用。语法或格式是否有任何错误？

document.getElementById("start").onclick = function()
{
location.href="player.html";
}
//**>>>**This doesn't work. Button does nothing when clicked****
document.getElementById("next").onclick = function()
{
location.href="player2.html";
}
document.getElementById("startgame").onclick = function()
{
location.href = "gameboard.html";
}

这是索引.html

<div class="container">
<header>
<h1>
Tic Tac Toe
</h1>
</header>

<div class="frame">
<div>
<button id="start">Start</button>
</div>
<div>
<button>Exit</button>
</div>
</div>
</div>

<script src="main.js"></script>

这是播放器.html

<div class="container">
<header>
<h1>Tic Tac Toe</h1>
</header>
<div class="frame">
<label for="player">Enter player1 name : </label>
<input type="textbox" id="player">
<div>            
<button id="next">Next</button>
</div>
</div>
</div>
<script src="main.js"></script>

Answer 1

以下代码在加载player.html页时导致错误，因为该页上没有 ID 为"start"的元素。

document.getElementById("start").onclick = function()
{
location.href="player.html";
}

您将在JS文件的顶部收到一个错误，这会破坏其他按钮。 我推荐 jQuery，因为在绑定 onclick 事件时找不到 ID 时它不会出错。 在jQuery中这样做。

$('#next').click(function(){
location.href="player.html";
});

如果你不想使用jQuery，这里是JavaScript的方式。

var elem = document.getElementById("start");
if(elem){
elem.onclick = function()
{
location.href="player.html";
}
}