title: Comparing strings with document.getElementById()
body: <p>I am trying to compare password fields in this function. If the first password field with ID txtPassword is the same as the second password field with ID txtPWVerified, then it should write the message "Password matches!" if it doesn't it should display the other message. At the moment it only displays the "Password matches!" message even when they don't match. How can I fix this? Thank you!!</p>
  
  <pre><code>function verifyPassword(){
      document.getElementById("verifyPassword").innerHTML = "Second try needed. Please make sure passwords match.";
  };
  
  function goodPassword(){
      document.getElementById("verifyPassword").innerHTML = "Passwords match!";
  };
  
  $("#txtPWVerified").blur(function(){
      var pass1 = document.getElementById("txtPassword");
      var pass2 = document.getElementById("txtPWVerified");
  
      if (pass1.innerHTML == pass2.innerHTML) {
          goodPassword();
      } else {
          verifyPassword();
      };
  });
  </code></pre>
  
  <p>EDIT: Below is the correct code, thanks for the help!</p>
  
  <pre><code>function verifyPassword(){
      document.getElementById("verifyPassword").innerHTML = "Second try needed. Please make sure passwords match.";
  };
  
  function goodPassword(){
      document.getElementById("verifyPassword").innerHTML = "Passwords match!";
  };
  
  $("#txtPWVerified").blur(function(){
      var pass1 = document.getElementById("txtPassword").value;
      var pass2 = document.getElementById("txtPWVerified").value;
  
      if (pass1 == pass2) {
          goodPassword();
      } else {
          verifyPassword();
      };
  });
  </code></pre>