Javascript hide/show function

Question

Im trying to create a login/register system/menu for a html5/js game im programming.

At the moment i have set up the html page with the different divs ill be using for the menu.

<!DOCTYPE html>
<html>
<head>
<title>TBG basic structure</title>
<script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="JS/game.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>
<body>
<section id="wrapper">
<header>
    <h1><img src="images/title.png" width="467" height="184"/></h1>

</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Leagues</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<article id="container">
    <div id="load-new">
        <p>LOAD/NEW</p>
    </div>
    <div id="reg">
        <p>REGISTER</p>
    </div>
    <div id="login">
        <p>LOGIN</p>
    </div>
    <div id="access">
        <p>ACCESS</p>
        <button id="login-but" onclick="login2()">Login</button>
        <button id="reg-but" onclick="register()">Register</button>
    </div>
    <canvas id="TBG" width="640" height="416">
        Please use a more up to date browser
    </canvas>
    <div id="GUI">
        <div id="health">
            <p><img src="images/heart.png"/>: <span class="gameHealth"></span></p>
            </div>
        <div id="energy">
            <p><img src="images/energy.png"/>: <span class="gameEnergy"></span></p>
        </div>
        <div id="table_container"></div>
    </div>
</article>

</section>
</body>
</html>

Basically i want to use javascript/jquery to hide show the correct parts of the menu due to users decisions.

So the first div the user will see is the access div which will give the user 2 options, "login" or "register" as you can see with the buttons within the access div above.

Basically i want my JS to hide the access div when one of the buttons are pressed and then either show the login div or reg div depending on which button the user pressed.

Here is the Js i have at the moment:

$(document).ready(function(){

var loadScr = $("#load-new");
var regScr = $("#reg");
var loginScr = $("#login");
var accessScr = $("#access");

    loadScr.hide();
    regScr.hide();
    loginScr.hide();

    function login()
    {
        accessScr.hide();
        loginScr.show();
    }

    function register()
    {
        accessScr.hide();
        regScr.show();
    }

});

It seems as though the onclick function of the buttons isnt interacting with the JS. i know this because i placed an alert which just said test in the login function which is called when the user clicks login button but i had no response back.

Am i doing something rather silly?

Thanks

Answer 1

The first thing you should do is add type="button" to your <button> elements. Your page might be reloading because some browsers treat <button> elements as type="submit" by default. Also, "-" is not a valid character in your id attributes, so I've replaced it with a "_".

<button id="login_but" type="button">Login</button>
<button id="reg_but" type="button">Register</button>

I also removed the onclick attributes from your buttons, because it would be better to assign the click events programmatically (an "unobtrusive" JavaScript technique). Next, I would move the two functions out of the document-ready, and forget about keeping references to the elements. Using ID selectors with jQuery is incredibly fast. Your JS should now look like:

function login()
{
    $('#access').hide();
    $('#login').show();
}

function register()
{
    $('#access').hide();
    $('#reg').show();
}

$(function() {

    $('#login_but').click(login);
    $('#reg_but').click(register);

    $('#load-new').hide();
    $('#reg').hide();
    $('#login').hide();

});

Javascript hide/show function

Question

1 answers

solution1
1 ACCPTED 2013-03-07 16:17:26

Javascript hide/show function

Question

1 answers

solution1 1 ACCPTED 2013-03-07 16:17:26

solution1
1 ACCPTED 2013-03-07 16:17:26