Cannot set property 'innerHTML' of null Javascript validation

Question

I get in the console a error of Cannot set property 'innerHTML'of null, how can i fix that the text after document.getElementById won't flash away after 1 sec. I added HTML code now, but when i want to post the button i only want to submit the form when everything is filled in and when it is not filled in. I want to show the error message.

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

The problem is you are using EmailError in your getElementById as the id but it is emailError. IDs are case sensitive.

Another way to debug such an error is to use the Google Chrome debugger or another development tool to catch uncaught exceptions and look to see which getElementById is failing to get a node (which element is null that you are attempting to set innerHTML on).

Or you can test which is not working by pasting these into the console one by one:

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

These are good basic approaches to troubleshooting JavaScript that take a tiny bit of time to learn but will be immensely helpful to you going forward.

Answer 2

You have id="emailError" with a lowercase e, but getElementById('EmailError') with a capital E. IDs are case sensitive!