CODEWITHSUNDEEP
javascript
user2265863
user2265863

Reputation:

Hiding HTML until an if Statement

I have recently been trying to set up a simple account system on my website. If you have an account the game will appear and if you don't the page will say, You need an account!

I can't seem to figure out how to hide the HTML embeded code until my if statement.

This is my code so far:

<html>
    <body>
        <div id="Game">
            <center>
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="700" height="600" align="middle" id="kingdom-rush-1-082">
                    <param name="movie" value="http://m.toogame.com/k/swfs/kingdom-rush-1-082_80r.swf">
                    <param name="quality" value="high">
                    <param name="AllowScriptAccess" value="always">
                    <!--[if !IE]>-->
                        <object type="application/x-shockwave-flash" data="http://m.toogame.com/k/swfs/kingdom-rush-1-082_80r.swf" width="700" height="600">
                            <param name="movie" value="http://m.toogame.com/k/swfs/kingdom-rush-1-082_80r.swf">
                            <param name="quality" value="high">
                            <param name="AllowScriptAccess" value="always">
                        <!--<![endif]-->
                        <!--[if !IE]>-->
                        </object>
                    <!--<![endif]-->
                </object>
        </div>
        <script type="text/javascript">
            var pass = window.prompt("Type Your Password")
             if ((pass == 'bacon'))
                 document.getElementById('Game').style.display = "none"
            else 
                 document.write("You need an account for this!")
        </script>
    </body>
</html>

Upvotes: 0

Views: 1603

Answers (4)

Benedict Lewis
Benedict Lewis

Reputation: 2813

Having seen your website, it is clear that you plan to use multiple passwords. I would then recommend using an Array to store passwords then checking if the input is included inside the array.

Working Demo

HTML:

<div id="result">Waiting for password input...</div>
<div id="hiddenContent" style="display: none">This content is normally hidden unless a user has entered the correct password. Using Javascript is not a very good way to secure content though, as it can easily be bypassed.</div>

Javascript:

var passwords = new Array();
passwords[0] = "pass1";
passwords[1] = "pass2";
passwords[2] = "pass3";
// This is your array of passwords. You can add as many as you want!

var passwordInput=prompt("Please enter your password...");
// This will ask for the user to enter their password

if (inArray(passwordInput, passwords)===true) {
    // This uses the inArray function to check if the users input is found within the array.
    document.getElementById("result").innerHTML="password found";
    document.getElementById('hiddenContent').style.display = "block"
    // If the password is found then it sets content of the <div> and makes it possible to view the hidden content.
}
else {
    document.getElementById("result").innerHTML="password not found";
    // If the password is not found then it sets the content of the <div>
}

// This function checks if a variable is found within an array
function inArray(variable, array) {
    var length = array.length;
    for(var i = 0; i < length; i++) {
        if(array[i] == variable) return true;
    }
    return false;
}

Upvotes: 0

collapsar
collapsar

Reputation: 17258

minor adjustmenst to nimchimpsky / arun p johny's solution (center element correctly terminated). if you choose to accept my answer you should rather accept the answer of one of the named contributors.

<html>
    <body>
        <div id="Game" style="display:none;">
            <center>
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="700" height="600" align="middle" id="kingdom-rush-1-082">
                    <param name="movie" value="http://m.toogame.com/k/swfs/kingdom-rush-1-082_80r.swf">
                    <param name="quality" value="high">
                    <param name="AllowScriptAccess" value="always">
                    <!--[if !IE]>-->
                        <object type="application/x-shockwave-flash" data="http://m.toogame.com/k/swfs/kingdom-rush-1-082_80r.swf" width="700" height="600">
                            <param name="movie" value="http://m.toogame.com/k/swfs/kingdom-rush-1-082_80r.swf">
                            <param name="quality" value="high">
                            <param name="AllowScriptAccess" value="always">
                        <!--<![endif]-->
                        <!--[if !IE]>-->
                        </object>
                    <!--<![endif]-->
                </object>
            </center>
        </div>
        <script type="text/javascript">
            var pass = window.prompt("Type Your Password")
             if ((pass == 'bacon'))
                 document.getElementById('Game').style.display = "block"
            else 
                 document.write("You need an account for this!")
        </script>
    </body>
</html>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Hide the html element first using style

<div id="Game" style="display: none">

Then in script

var pass= window.prompt("Type Your Password")
if ( (pass=='bacon') )
    document.getElementById('Game').style.display = "block"
else
    document.write("You need an account for this!")

Upvotes: 1

NimChimpsky
NimChimpsky

Reputation: 47300

document.getElementById('Game').style.display = "block"

The password will be viewable by anyone with a browser, good password though.

diplsay:block means its visible display:none it is not visible.

Upvotes: 1

Related Questions