Невозможно установить свойство «innerHTML» null Проверка Javascript

Question

Я получаю в консоли ошибку Не могу установить свойство innerHTML'of null, как я могу исправить то, что текст после document.getElementById не будет мигать через 1 секунду. Я добавил HTML-код сейчас, но когда я хочу опубликовать эту кнопку, я хочу только отправить форму, когда все будет заполнено и когда оно не будет заполнено. Я хочу показать сообщение об ошибке.

function validateForm() 
    { 
     var error = 0; 
     if(!voornaam('voornaam')) 
     { 
      document.getElementById('VoornaamError').innerHTML = "vul het veld naam in"; 
      error++; 
     } 
     if(!email(document.getElementById('Email').value)) 
     { 
      error++; 
      document.getElementById('EmailError').innerHTML = "vul het veld email in"; 
     } 
     if(error > 0){ 
      return false; 
     } 
    } 

<form method="post" onsubmit="return validateForm()"> 
          <label>Voornaam*</label> 
          <input type="text" name="Username" id="Username" placeholder="voornaam" onblur="voornaam(this)" maxlength="40"> 
          <div id="VoornaamError" style="color: red;"></div> 

          <label>tussen voegsel</label> 
          <input type="text" name="Username" id="Username" placeholder="tussen vgsl"> 
          <br> 

          <label>Achternaam*</label> 
          <input type="text" id="Achternaam" placeholder="achternaam" onblur="achternaam(this)" maxlength="40"> 
          <div id="AchternaamError" style="color: red;"></div> 

          <label>Adres*</label> 
          <input type="text" id="Adres" placeholder="adres" onblur="adres(this)" maxlength="40"> 
          <div id="AdresError" style="color: red;"></div> 

          <label>Postcode*</label> 
          <input type="text" id="Postcode" placeholder="postcode" onblur="postcode(this)" maxlength="7"> 
          <div id="PostcodeError" style="color: red;"></div> 

          <label>Woonplaats*</label> 
          <input type="text" id="Woonplaats" placeholder="woonplaats" onblur="woonplaats(this)" maxlength="40"> 
          <div id="WoonplaatsError" style="color: red;"></div> 

          <label>Telefoonnummer mobiel*</label> 
          <input type="text" id="Telefoonnummer" placeholder="telefoonnummer" onblur="telefoonnummer(this)" maxlength="20"> 
          <div id="telError" style="color: red;"></div> 

          <label>Email adres*</label> 
          <input type="text" id="Email" placeholder="email" onblur="email(this)" maxlength="20"> 
          <div id="emailError" style="color: red;"></div> 

          <input type="submit" value="post"> 
        </form> 

Answer 1

Проблема заключается в использовании EmailError в вашем getElementById как идентификатор, но это emailError. Идентификаторы чувствительны к регистру.

Другой способ отладки такой ошибки является использование отладчика Google Chrome или другой инструмент разработки, чтобы поймать неперехваченные исключений и посмотрите, которые getElementById не в состоянии получить узел (какой элемент является нулевым, что вы пытаетесь установить innerHTML на).

Или вы можете проверить, не работает, вставив их в консоли один за другим:

1. document.getElementById('VoornaamError')
2. document.getElementById('EmailError')

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

Answer 2

У вас есть id="emailError" с пропиской e, но getElementById('EmailError') с капиталом E. Идентификаторы чувствительны к регистру!