CODEWITHSUNDEEP
javascripturl
sangoko
sangoko

Reputation: 351

Either document.location or window.location.href won't work in the if part of the condition, but will work on the else part

I use the following code to validate a password in a form. If the password is correct - Move the user to site X. If it's incorrect (after 3 tries), move the user to site Y.

For some reason, it works only for site Y.

My code:

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <form>
        Enter password to continue: <br>
        <input type="text" id="user"/>
        <input type="button" id="myButton" value="Enter site"/>
        </form>

        <script>
           let tries = 0;
                let error = 0;
            let password = 'tiesto';

            document.querySelector("#myButton").onclick = ()=> {
                let passwordValue = document.querySelector('#user').value;
                if (password === passwordValue) {
                    window.location.href = 'http://maariv.co.il';
                } else {
                    tries++;
                    alert('Try again please.');
                }

                if (tries === 3) { // 3 is the border.
                    error++;
                }

                if (error === 1) {
                    window.location.href = 'http://microsoft.com';
                }
            };
        </script>
    </body>
</html>

I tried doing:

  1. Checking for syntax errors all over the code.
  2. Changing === to == (I thought, maybe due to it being a string, the quote marks counted as well, of course I was mistaken).
  3. window.location.href = 'http://maariv.co.il', true;
  4. Adding return false right under window.location.href

As a beginner I ask, why would the condition works only in a half? That is, the positive part (than) doesn't work but the negative part (else) does work.

Update:

This is just an exercise. Indeed. This isn't going to production. In production I should store and request the password from a database.

Upvotes: 0

Views: 1288

Answers (2)

Phani Kumar M
Phani Kumar M

Reputation: 4590

Put the following line let passwordValue = document.querySelector('#user').value; inside onclick of "mybutton".

let tries = 0;
let error = 0;
let password = 'tiesto';

document.querySelector("#myButton").onclick = ()=> {

    let passwordInput = document.querySelector('#passwordInput').value;
    if (password === passwordValue) {
        window.location.href = 'http://maariv.co.il';
    } else {
        tries++;
        alert('Try again please.');
    }

    if (tries === 3) { // 3 is the border.
        error++;
    }

    if (error === 1) {
    window.location.href = 'http://microsoft.com';
    }
};
<form>
  Enter password to continue: <br>
  <input type="text" id="user" />
  <input type="button" id="myButton" value="Enter site" />
</form>

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26360

Use return :

if (password === passwordValue) {
    return window.location.href = 'http://maariv.co.il';
}

Otherwise, the function will execute to the end, and you will reach the second redirection, that will then override the first one.

Upvotes: 0

Related Questions