CODEWITHSUNDEEP
javascripthtmlprompt
Mihir Chaturvedi
Mihir Chaturvedi

Reputation: 276

A simple JS+HTML script not working properly for me

I've got the following code:

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;">
        <button onclick="usernamePrompt()">Click to enter the username</button>
        <button onclick="passwordPrompt()">Click to enter the password</button>
        <button onclick="verify()">Verify here</button>
    </div>
    <div style="text-align: center;margin: auto;display: block;padding: 20px;">
        <p style="text-align: center;font-size: 20px;" id="verifyPara"></p>
    </div>
    <script type="text/javascript">
        function usernamePrompt () {
            window.username = prompt('Enter username:');
        };
        function passwordPrompt () {
            window.password = prompt('Enter password:');
        };
        function verify (username,password) {
            if (username === "immoral" && password ==="koala") {
                document.getElementById('verifyPara').innerHTML='Success!';
            } else {
                document.getElementById('verifyPara').innerHTML='Fail!';
                delete username;
                delete password;
            };
        }
    </script>

When ever I try this code, of course, I submit the data in the two 'prompt's. I use this data in the if-else statement and if the submitted username and passwords are what are needed, then it should produce 'Success', else it should produce 'Fail'.
The problem is that it never produces 'Success', and is always a 'Fail'. What's wrong with the code? Please help. Thanks

Upvotes: 1

Views: 79

Answers (4)

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

First thing i need to say that you can not take password as a text field with javascript prompt.Well, for your solution you can set two hidden fields-- one for username and another for password. set the value after prompt. When compare, compare from the hidden value. Again I said this is not the practice in real life. you can see it for better understanding how javascript works.
See the code below: 

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;">
        <button onclick="usernamePrompt()">Click to enter the username</button>
        <button onclick="passwordPrompt()">Click to enter the password</button>
        <button onclick="verify()">Verify here</button>
    </div>
    <div style="text-align: center;margin: auto;display: block;padding: 20px;">
        <p style="text-align: center;font-size: 20px;" id="verifyPara"></p>
    </div>
    <input type="hidden" id="userName"/>
    <input type="hidden" id="password"/>
    <script type="text/javascript">

        function usernamePrompt () {
            var username = prompt('Enter username:');
            document.getElementById('userName').value= username;
        };
        function passwordPrompt () {
            var password = prompt('Enter password:');
            document.getElementById('password').value = password;
        };
        function verify ( ) {
            if (document.getElementById('userName').value == "immoral" && document.getElementById('password').value =="koala") {
                document.getElementById('verifyPara').innerHTML='Success!';
            } else {
                document.getElementById('verifyPara').innerHTML='Fail!';


            };
        }
    </script>

Upvotes: 2

Mohammad Usman
Mohammad Usman

Reputation: 39322

The reason why you always have 'Fail' is that you are passing variables username and password to your verify(username, password) function, these variables are local to verify function(not mix them with global variables)... In javascript if we have local and global variables with same name then local variables hides the global variables... same is the case with your code.. inside verify function you are accessing local variables(not global ones bcz of same name).. so you need to remove them from arguments and make the comparison with global variables... Although its not a good approach to store variables in global scope and use them like this but for the sake of your problems following is a possible solution...

<script type="text/javascript">
    function usernamePrompt () {
        window.username = prompt('Enter username:');
    };
    function passwordPrompt () {
        window.password = prompt('Enter password:');
    };
    function verify () {
        if (window.username === "immoral" && window.password ==="koala") {
            document.getElementById('verifyPara').innerHTML='Success!';
        } else {
            document.getElementById('verifyPara').innerHTML='Fail!';
            delete window.username;
            delete window.password;
        };
    }
</script>

Upvotes: 0

Kalpesh Singh
Kalpesh Singh

Reputation: 1717

The reason behind your error is that, you were not passing parameters to your verify function. Just pass parameters and it will work. 

function usernamePrompt () {
            window.username = prompt('Enter username:');
        };
        function passwordPrompt () {
            window.password = prompt('Enter password:');
        };
        function verify (username,password) {
            if (username === "immoral" && password ==="koala") {
                document.getElementById('verifyPara').innerHTML='Success!';
            } else {
                document.getElementById('verifyPara').innerHTML='Fail!';
                delete username;
                delete password;
            };
        }
<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;">
        <button onclick="usernamePrompt()">Click to enter the username</button>
        <button onclick="passwordPrompt()">Click to enter the password</button>
        <button onclick="verify(window.username, window.password)">Verify here</button>
    </div>
    <div style="text-align: center;margin: auto;display: block;padding: 20px;">
        <p style="text-align: center;font-size: 20px;" id="verifyPara"></p>
    </div>

Upvotes: 1

Xzandro
Xzandro

Reputation: 977

Since you declare the variables globally, you can just check them.

function verify() {
    if (window.username === "immoral" && window.password === "koala") {
        document.getElementById('verifyPara').innerHTML = 'Success!';
    } else {
        document.getElementById('verifyPara').innerHTML = 'Fail!';
        delete username;
        delete password;
    };
}

https://jsfiddle.net/0s2fL79r/1/

Upvotes: 1

Related Questions