Javascript не работает в XAMPP

Question

Когда я запускаю мой яваскрипта код в HTML, это хорошо, но когда я запускаю тот же код на локальном хосте он показывает мне это сообщение в консоли:

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> 

В первой части кода должен быть добавлен цвет в поле ввода для пароля повторной отправки зеленым цветом, если пароль совпадает или красный, если они этого не делают, но он всегда красный.

Вторая часть должна добавить класс для защиты паролем, но ничего.

Answer 1

Проблема решена,

Я сделал ошибку в части кода, что я не отправлял в моем вопросе. У меня было два идентификатора пароля.

Так что мне пришлось заменить:

<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!" 

, который не является автоматической ошибки, но вы хотите избавиться от возможного неправильного толкования вашего браузера.