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.

Note, this is just an exercise cide. This isn’t going to production. In production I should store and request the password from a database so it won’t be seen to all in a variable in the browser.

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';
    			let passwordValue = document.querySelector('#user').value;
    
    			document.querySelector("#myButton").onclick = ()=> {
    				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.

because passwordValue never changes from its initial value (an empty string).

Why won’t it? I targeted the value attribute of the field. Why won’t it changed when I fill in the password on browser?

yes. at the time the page loads.

why should a primitive string change once it’s defined?

Only objects are passed by reference.

But what is the string you say is defined? The only string I’ve defined is the password string. I don’t want to change it, I just want to check if it’s compared to the value inserted by the user, in form execution.

If the function runs onclick so I can’t see why the comparison fails.

you have defined two strings:

let password = 'tiesto';
let passwordValue = document.querySelector('#user').value;

you can easily check with typeof passwordValue that it’s a string too.

Oh, I didn’t imagine a querySelector would define a string. How did this happen?.. AFAIK querySelector just selects queries and/or their attributes and values.

It doesn’t. it’s the .value that makes the string.

I now understand why — value is a property and if we just mark it, it will be marked with an empty string. What should I read on to understand how this happens? Or you would want to explain that? Thanks anyway!

respectively with whatever the value of the input field is at that moment. if you’d use <input type="text" id="user" value="fizz buzz"> as HTML you’d get ‘fizz buzz’ for passwordValue.

What you actually wanted is not to store the initial field value, but a reference to the field itself so that you can at any time check for the current field value.

So, the moment I added .value to the querySelector, there formed an empty value attribute on execution, but if there was an attribute with the value “fuzz buzz” than that one was there out of the box.

I will check how I reference to the field itself so that I could at any time check for the current field value.

1 Like

@Dormilich

Actually the basic code I used is okay, here’s the code that finally worked.

I did have to do 2 things:

  1. Moving the following code inside the event function handler:

let passwordInput = document.querySelector('#passwordInput').value;

This is to make sure the new value will be setted and saved each time the event is triggered.

  1. Returning the new document.location so to stop the function with that result, in case of success.

The combination of these two resulted as desired.

This is the whole working code:

<!DOCTYPE html>
<html>
	<body>
		<form id="myForm">
		Enter password to continue: <br>
			<input type="text" id="passwordInput"/>
			<input type="button" id="myButton" value="Enter site"/>
		</form>
		<script>
			let tries = 0;
			let error = 0;
			let password = 'tiesto';

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

				let passwordInput = document.querySelector('#passwordInput').value;

				if (password === passwordInput) {
					return 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>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.