title: The messages are not properly being displayed on my webpage in javascript. The message only displays after clicking in and out of the textbox twice.
body: <p>I wrote several functions to check if the two passwords are equal. I first type two passwords. When I click out of the "verify password" box, it should either display "The passwords match" or "Please enter your password again because the two passwords don't match" depending on whether or not the passwords are equal to each other. However, when I type in two identical passwords and I click out of the "verify password" text box, the message does not display the first time. I have to click inside the "verify password" box one more time, and then click out of it for the message to display. I want the message to display right after I click out of the "verify password" textbox, not having to click in and out again. What am I doing wrong here?</p>
  
  <p>I am using a password.js file and a setpassword.html file for this webpage.</p>
  
  <p>My password.js file is:</p>
  
  <pre><code>var verifypasswordclick = document.getElementById("txtPWVerified");
  
  function verifypassword1() {
      var password1 = document.getElementById("txtPassword").value;
      var verifypassword = document.getElementById("txtPWVerified").value;
      if(password1 == '' || verifypassword == '') {
          return null;
      }
      if(password1 == verifypassword) {
          alert('The passwords match');
      }
      else if(password1 !== verifypassword || password1 == "" || verifypasword == "") {
          alert("Please enter your password again because the two passwords don't match");
      }
  }
  
  verifypasswordclick.onblur = function() {
  verifypasswordclick.addEventListener("blur",verifypassword1);
  };
  </code></pre>
  
  <p>My setpassword.html file is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!-- H5FormValidation.html --&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Register Here&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h2&gt;Register Here&lt;/h2&gt;
  
    &lt;form id="formTest" method="get" action="processData"&gt;
      &lt;table&gt;
  
      &lt;tr&gt;
        &lt;td&gt;&lt;label for="txtEmail"&gt;Email&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="email" id="txtEmail" name="email" required&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for="txtPassword"&gt;Password&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="password" id="txtPassword" name="password" required&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for="txtPWVerified"&gt;Verify Password&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="password" id="txtPWVerified" name="pwVerified" required&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;td&gt;
            &lt;input type="reset" value="CLEAR" id="btnReset"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/form&gt;
   &lt;script src = "password.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>