javascript on click function is not working at all

Question

Second function, which should take me to player2.html, isn't working for some reason. Is there any mistake in syntax or format?

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";
}

This is 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>

This is 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>

We also need to see your HTML that contains the next button. — user47589
– user47589, Commented May 22, 2018 at 19:16
From what i see it should work. you probably need to Check the console and see if there's any errors in there, and posting your html too would help :) — user7148391
– user7148391, Commented May 22, 2018 at 19:20
No. It works fine,only if i put the function in different .js file but when put together doesnt work. Is there any logic behind that. — saujan
– saujan, Commented May 22, 2018 at 19:23
@saujan Yeah you probably have an error in your JS somewhere. If there are syntax errors, nothing in your script will run. If there are runtime errors, your script will stop there. Look at your debug console to see if there are any errors. — xyhhx
– xyhhx, Commented May 22, 2018 at 19:25
You player.html page does not have an element with id start, so your script will fail on the first line where it tries to set onclick on an undefined object. — Gabriele Petrioli
– Gabriele Petrioli, Commented May 22, 2018 at 19:27

Bill Kindig · Accepted Answer · 2018-05-22 19:49:03Z

1

The following code is causing an error when you load the player.html page because there's no element with an id of "start" on that page.

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

You'll get an error at the top of the JS file, which breaks the other buttons. I recommend jQuery, as it won't error when an ID isn't found when binding an onclick event. In jQuery do this.

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

If you don't want to use jQuery, here's the JavaScript way

var elem = document.getElementById("start");

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

edited May 22, 2018 at 19:49

answered May 22, 2018 at 19:35

Bill Kindig

3,6722 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

saujan Over a year ago

i followed your javascript way. Can u plz tell me how if statement worked??

Bill Kindig Over a year ago

Yes. IF returns a boolean, yes or no. If something is NULL, the IF fails. In this case, if the element is null, the IF statement fails.

Collectives™ on Stack Overflow

javascript on click function is not working at all

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related