无法设置属性 'innerHTML' 的 null Javascript 验证

Question

我在控制台报错Cannot set 属性 'innerHTML'of null，如何解决document.getElementById后的文字不会闪退1秒。我现在添加了 HTML 代码，但是当我想要 post 按钮时，我只想在填写所有内容和未填写时提交表单。我想显示错误消息。

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

问题是您在 getElementById 中使用 EmailError 作为 ID，但它是 emailError。 ID 区分大小写。

调试此类错误的另一种方法是使用 Google Chrome 调试器或其他开发工具来捕获未捕获的异常并查看哪个 getElementById 未能获得节点（您试图在哪个元素上设置 innerHTML）。

或者您可以通过将这些一一粘贴到控制台来测试哪个不起作用：

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

这些是很好的故障排除基本方法 JavaScript 需要一点时间来学习，但对您今后的发展会有很大帮助。

Answer 2

您的 id="emailError" 是小写 e，但 getElementById('EmailError') 是大写 E。 ID 区分大小写！

无法设置属性 'innerHTML' 的 null Javascript 验证

Cannot set property 'innerHTML' of null Javascript validation

javascript

validation

null

无法设置 属性 'innerHTML' 的 null Javascript 验证

Cannot set property 'innerHTML' of null Javascript validation

javascript

validation

null

无法设置属性 'innerHTML' 的 null Javascript 验证