How to associate condition-reaction with document.querySelector?

These are some points that I would want to focus on :

  1. To select a particular element using the query selector, remember these :
    • If you happen to know the id of the element, use document.getElementById(id). This is the most prominent way of selection, as usually id is unique for all elements.
    • If you happen to know the class of the element, use document.getElementsByClassName(class). This method has certain amount of risk, as there could be more than one element with the same class.
    • If you happen to know the tagName of the element, use document.getElementsByTagName(tag).
    • The easiest way to achieve element selection is by using document.querySelector('tag'/ '.class'/ '#id'). You can refer here for more about the same.
  2. Now, you need to understand that your function passType(), which here validates the entered password based in the array of passwords you have defined, needs to be called only after the user has input the password and click the Sign In button.

    In order to achieve this, you will have to bind the submit event to an EventListener. This can be achieved by using document.querySelector('form').addEventListener('submit', passType);

  3. Now finally, as per the code snippet you provided, you want to give the user a second chance in case the user enters a wrong password at first attempt. For this, you will have to store the attempt counts in a variable. Also, the EventListener of the submit action button keeps bubbling, and in order to prevent it, you need to use event.preventDefault()

Keeping all this in mind, I believe this will solve your problem. Here is the rectified code snippet :

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Password - form</title>
</head>

<body>

<form>
<label>Password</label>
<input type="password" id="passid"/>
<br>
<input type="submit" value="Sign In"/>
</form>

<script>

var attemptCount = 0;

function passType(event) {
    event.preventDefault();
    var enteredValue = document.querySelector('form').querySelector('#passid').value;
    var password = ['p1', 'p2', 'p3', 'p4', 'p5'];

    if (password.indexOf(enteredValue) > -1) {
        alert("That's great! Thank you!");
    }
    else {
        attemptCount++;
        alert('Wrong, try again');
        if (attemptCount <= 1) {
            alert("It's wrong, you have one more try...");
            document.querySelector('form').querySelector('#passid').value = '';
        } else {
            alert('Get out now!');
            window.close();
        }
    }
}

document.querySelector('form').addEventListener('submit', passType);

</script>

</body>

</html>

Feel free to ask any queries you have on the same.


How to access form using query selector?

let frm = document.querySelector('form');

Then Listen for its submit event.

frm.addEventListener('submit', passType);

How can you access the input password?

You need to make changes to your function. First add the following to the top of your "passType" function. The following snippet saves the user input into the variable pass.

let p = frm.querySelector('#passid');//Get the DOM node
let pass = p.value;//Get the input value

Now Modify if (password.indexOf > -1) to if (password.indexOf(pass) > -1) to check for actual input.

DEMO 

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Password - form</title>
</head>

<body>

  <form>
    <label>Password</label>
    <input type="password" id="passid" />
    <br>
    <input type="submit" value="Sign In" />
    <!-- We also have input type = "button" and events for both >>> onsubmit & onclick. -->
  </form>

  <script>
    function passType() {
      let p = frm.querySelector('#passid');
      let pass = p.value;
      var password = ["p1", "p2", "p3", "p4", "p5"];

      if (password.indexOf(pass) > -1) {
        alert("That's great! Thank you!");
      } else {
        alert("Wrong, try again");
        if (password.indexOf(pass) > -1) {
          alert("It's wrong, you have one more try...");
        } else {
          alert("Get out now!");
          window.close();
        }
      }

    }

    let frm = document.querySelector('form');
    frm.addEventListener('submit', passType);
  </script>

</body>

</html>


I guess you're asking how to get the value the user typed into the password field. That's document.getElementById("passid").value. So you would write:

if (password.indexOf(document.getElementById("passid").value) > -1) {
    alert("That's great! Thank you!");
}

Note that calling passType() in the top-level of the script won't work. That will run when the page is first loaded, not wait for the user to fill in the password. You should call it when the user submits the form. You should do:

document.querySelector("form").addEventListener("submit", passAll);

You should also change the passAll() function so it calls Event.preventDefault() if the user enters an incorrect password, to prevent submitting the form. See

return false on addEventListener submit still submits the form?

Also, checking a password in client-side Javascript is not very secure. There's nothing stopping the user from modifying the script or bypassing it. Passwords should be checked on the server, so that the user cannot override it.

Tags:

Javascript

Html

Methods

Conditional Statements

Recent Posts