パスワード確認nullのプロパティ 'parentNode'を読み取れません

Question

したがって、2つのパスワードが一致しない場合、Javascriptを使用して別のdivにdivを挿入しようとしています。しかし、これを実行しようとするたびに、この投稿のタイトルにエラーが表示されます。 2つのパスワードが一致すると、divが消えてしまいます。あなたの外側else声明で

function passwordMismatchError(){ 
    var pwrd1 = document.getElementById('password').value; 
    var pwrd2 = document.getElementById('password-confirmation').value; 
    if(pwrd1 != pwrd2){ 
     // If there is an error box already 
     if(document.getElementById("password-mismatch-error")){ 
      return; 
     } 
     // If there isn't an error box 
     else{ 
      errcount++; 
      var innerdiv = document.createElement('div'); 
      innerdiv.setAttribute("id", "password-mismatch-error"); 
      innerdiv.innerHTML = "<p>ERROR: Passwords don't match.</p>"; 
      (document.getElementById("error-display")).appendChild(innerdiv); 
     } 
    } 
    else{ 
     // If the passwords match 
     errcount--; 
     var innerdiv = document.getElementById("password-mismatch-error"); 
     console.log(innerdiv); 
     innerdiv.parentNode.removeChild(innerdiv); 
     return; 
    } 
} 

Answer 1

は、#password-mismatch-errorがDOMに追加されることはありませんので、innerdivは未定義になります。したがって、parentNodeにアクセスすることはできません。

は単にif(document.getElementById("password-mismatch-error"))とその親を削除しようとする前に要素が存在することを確認し、これを解決するには、次の

function passwordMismatchError(){ 
    var pwrd1 = document.getElementById('password').value; 
    var pwrd2 = document.getElementById('password-confirmation').value; 
    if(pwrd1 != pwrd2){ 
     // If there is an error box already 
     if(document.getElementById("password-mismatch-error")) { 
      return; 
     } 
     // If there isn't an error box 
     else{ 
      errcount++; 
      var innerdiv = document.createElement('div'); 
      innerdiv.setAttribute("id", "password-mismatch-error"); 
      innerdiv.innerHTML = "<p>ERROR: Passwords don't match.</p>"; 
      (document.getElementById("error-display")).appendChild(innerdiv); 
     } 
    } 
    else{ 
     // If the passwords match 
     errcount--; 
     // Ensure the error message actually exists in the DOM 
     if(document.getElementById("password-mismatch-error")) { 
      var innerdiv = document.getElementById("password-mismatch-error"); 
      console.log(innerdiv); 
      innerdiv.parentNode.removeChild(innerdiv); 
     } 
     return; 
    } 
} 

ホープ、このことができます！ :)