Javascript 表单验证无法读取null的属性样式

我有一个带有验证的表单，但没有显示日期验证消息，在控制台中，它读取..属性样式为null，并在此函数上下文中突出显示此代码“error_box.style.display='block'；”

function displayError(fieldname, message){
    var input_field = document.querySelector('#'+fieldname);
    var error_box = document.querySelector('#'+fieldname+'Message');

    addClass(input_field, 'error');
    removeClass(input_field, 'correct');
    error_box.style.display = 'block';
}

我掌握了完整的代码：

HTML

拾起


下车


那个日期无效
全名*


您必须有一个有效的名称
电子邮件*


你必须有一封有效的电子邮件
电话号码*


你必须有一个有效的电话号码
邮政地址


城市


附加信息
在此处输入文本。。。

我无法重现该问题，因此步骤可能会有所帮助。从错误的声音来看，

error\u box

似乎返回null（在DOM中找不到任何内容）。这可能是值得的，通过输入

控制台.log

并检查

fieldname

是什么来确保您的选择器是正确的。您还可以放置一些断点并使用逐步调试程序。请在此发布一个显示问题的最小示例。在别处粘贴300行HTML和代码只会使其他人的生活更加困难，并在此处留下一组无实体的注释和答案。正如Chase所说，当您的函数正在访问该元素时，该元素尚未准备就绪，这里还有6条警告我删除了fiddle@user790454中不必要的输入对不起，元素未准备好是什么意思？

    <form action="#">
<div class="formColumn1">

     <label for="pickup"><span class="textStyle">Pick-up</span>
        <input type="date" id="pickup"></label><br>

          <label for="dropoff"><span class="textStyle">Drop-off</span>
        <input type="date" id="dropoff"><br>
        <span id="dropoff" class="message">That date is invalid</span></label>

    <div id="pickuperror"></div>


</div>
<!--COLUMN ONE END -->
</div>

<!--COLUMN TWO -->
<div class="formColumn2">

        <label for="name"><span class="textStyle">Full Name*</span>
        <input type="text" id="name"><br>
        <span id="nameMessage" class="message">You must have a valid name</span>
         </label>

        <label for="email"><span class="textStyle">Email*</span>
        <input type="text" id="email"><br>
        <span id="emailMessage" class="message">You must have a valid email</span>
         </label>

        <label for="phoneNumber"><span class="textStyle">Phone Number*</span>
        <input type="text" id="phoneNumber"><br>
        <span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
         </label>

        <label for="postalAddress"><span class="textStyle">Postal Address</span>
         <input type="text" id="postalAddress"><br>
         </label>

        <label for="city"><span class="textStyle">City</span>
        <input type="text" id="city"><br>
        </label>

        <span class="textStyle">Addtional Information</span>
        <textarea name="comment" form="usrform">Enter text here...</textarea>

        <input type="submit" id="submit" value="Submit"/>

<!--COLUMN TWO END-->
</div>

    </form>
<!--END OF FORM-->
</div>