的Javascript不是在XAMPP工作

Question

當我在HTML運行我的JavaScript代碼，這很好，但是當我在本地主機上運行相同的代碼，它顯示我在控制檯此消息：

Uncaught TypeError: Cannot read property 'style' of null

這是我的代碼

代碼

<form method="post"> 
    <ul id="edit"> 
     <li> 
      <input type="text" name="adress" id="adress" placeholder="Adresa" /> 
     </li> 
     <li> 
      <input type="text" name="city" id="city" placeholder="Grad" /> 
     </li> 
     <li> 
      <input type="number" name="zip" id="zip" placeholder="Poštanski broj" /> 
     </li> 
     <li> 
      <input type="tel" name="phone_number" id="phone_number" placeholder="Tel. broj" /> 
     </li> 
     <li> 
      <input type="password" name="password" id="password" placeholder="Lozinka" /> 
      <div class="password_strength" id="password_strength"></div> 
     </li> 
     <li> 
      <input type="password" name="repassword" id="repassword" placeholder="Ponoviti lozinku" onkeyup="checkPass(); return false;" /> 
     </li><div id="confirmMessage"></div> 
     <br> 
     <li> 
      <input type="submit" name="submit" id="submit" value="Izmjeni" /> 
     </li> 
     <br> 
    </ul> 
</form> 

<script> 
    function checkPass() { 
     var password = document.getElementById('password'); 
     var repassword = document.getElementById('repassword'); 
     var message = document.getElementById('confirmMessage'); 
     var goodColor = "#66cc66"; 
     var badColor = "#ff6666"; 
     if (password.value == repassword.value) { 
      repassword.style.backgroundColor = goodColor; 
      message.style.color = goodColor; 
      message.innerHTML = "Passwords Match!" 
     } else { 
      repassword.style.backgroundColor = badColor; 
      message.style.color = badColor; 
      message.innerHTML = "Passwords Do Not Match!"; 
     } 
    } 

    $('#password, #username').keydown(function (e) { 
     if (e.which == 32) { 
      return false; 
     } 
    }); 
    $('#password').keyup(function() { 
     var PasswordLength = $(this).val().length; 
     var PasswordStrength = $('#password_strength'); 

     if (PasswordLength <= 0) { 
      PasswordStrength.html(''); 
      PasswordStrength.removeClass('normal weak strong verystrong'); 
     } 
     if (PasswordLength > 0 && PasswordLength < 4) { 
      PasswordStrength.html('weak'); 
      PasswordStrength.removeClass('normal strong verystrong').addClass('weak'); 
     } 
     if (PasswordLength > 4 && PasswordLength < 8) { 
      PasswordStrength.html('Normal'); 
      PasswordStrength.removeClass('weak strong verystrong').addClass('normal'); 
     } 
     if (PasswordLength >= 8 && PasswordLength < 12) { 
      PasswordStrength.html('Strong'); 
      PasswordStrength.removeClass('weak normal verystrong').addClass('strong'); 
     } 
     if (PasswordLength >= 12) { 
      PasswordStrength.html('Very Strong'); 
      PasswordStrength.removeClass('weak normal strong').addClass('verystrong'); 
     } 
    }); 

</script> 

第一部分應在綠色顏色添加到我的輸入框repeaedt密碼，如果密碼匹配或紅色，如果他們不這樣做，但它始終是紅色的。

第二部分應該爲密碼強度添加一個類，但什麼都不是。

Answer 1

問題解決了，

我在部分代碼中犯了錯誤，我沒有在我的問題中發帖。 我有兩個相同的密碼ID。

所以我不得不更換：

<form action="login.php"> 
    E-mail: <input type="mail" name="mail" id="mail"/><br><br> 
    Lozinka: <input type="password" name="login_password" id="login_password"/><br><br> 
    <input type="submit" value="Prijavi se"/><br><br> 
    <a href="#" style="text-decoration:none; float:right;">Zaboravljena lozinka?</a> 
</form> 

有了：

<form action="login.php"> 
    E-mail: <input type="mail" name="mail" id="mail"/><br><br> 
    Lozinka: <input type="password" name="login_password" id="login_password"/><br><br> 
    <input type="submit" value="Prijavi se"/><br><br> 
    <a href="#" style="text-decoration:none; float:right;">Zaboravljena lozinka?</a> 
</form> 

感謝大家的幫助:)

Answer 2

首先，如果您使用控制檯，您應該有一個與您的錯誤代碼關聯的行號。其次，我注意到，有與無分號

message.innerHTML = "Passwords Match!" 

這是不是一個錯誤自動結束的行，但你想通過瀏覽器，以消除可能的誤解。