点击功能上的javascript根本不起作用

时间:2018-05-22 19:14:33

标签: javascript html

第二个功能,它应该带我到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";
}

这是index.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>

这是player.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>

1 个答案:

答案 0 :(得分: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";
    }
}