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作为ID，但它是emailError。 ID区分大小写。

调试此类错误的另一种方法是使用Google Chrome调试器或其他开发工具捕获未捕获的异常，并查看哪个getElementById无法获取节点（您尝试的哪个元素为null）设置innerHTML。）

或者你可以通过将它们逐个粘贴到控制台来测试哪个不起作用：

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

这些是对JavaScript进行故障排除的良好基本方法，需要花费一点时间来学习，但对您的进展将非常有帮助。

Answer 2

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

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

2 个答案: