Javascript Can'；添加事件侦听器时无法读取属性

这件事已经搞了一段时间了，这是没有意义的。。。下面是我的

表单

代码，我只想在提交表单时添加一个事件侦听器

<form action="php/submitMessage.php" method="post" id="messageForm" class="messageForm">
    <div class="left half">
        <input class="text" type="text" name="name" placeholder="First and Second Name *" 
        rules="[A-Za-z]*\s[A-Za-z]*" />
        <input class="text" type="text" name="email" placeholder="Email Address *" 
        rules="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" />

        <textarea name="message" placeholder="Enter your message here... *" rows="5"></textarea>
    </div>
    <div class="right half">
        <input class="text" type="text" name="reg" placeholder="Car Registration"/>

        <input type="file" name="image" id="image" style="display:none;" />

        <label for="image" id="reviewUpload" class="uploadBtn">Upload Image</label>

        <h8>Message will be regarded as a quote request if you provide an image.</h8>
        <div class="g-recaptcha" data-sitekey="6LcqfAwTAAAAAGLRx1Gea3JtHqWHO6s1RzO-HlZ2"></div>
    </div>
    <input type="submit" id="submit" style="background-color:#fff;color:#000;" 
    value="Submit Message/Quote" />
</form>

我甚至尝试了

document.getElementById

，但这也不起作用，我只是不断出现以下错误，但我发现代码根本没有问题

未捕获的TypeError:无法读取null的属性“addEventListener”

编辑： 以下是我为使其工作所做的：

window.onload = function () 
{ 
    //Event Listeners
    var messageForm = document.getElementById("messageForm");
    messageForm.addEventListener("submit",handleSubmit);
}

---

确保将JavaScript放在页脚中（就在结束正文标记之前）。这样，当您尝试访问DOM元素时，所有DOM元素都已准备就绪。您的

document.querySelector

可以工作，但是您需要添加一个

，因此它就是

document.querySelector（“#messageForm”）

将行

var messageForm=document.querySelector（“messageForm”）

更改为

var messageForm=document.querySelector（“#messageForm”）

如果您使用querySelector，您必须为ID定义CSS类型“#”，为类定义CSS类型“.”，这将修复它意味着用

文档替换
文档。querySelector
可以工作，如果JS代码是在DOM中呈现
#messageForm
元素之后执行的。@那一定是出错的地方，很明显表单在主体中，JavaScript在头部。我是否应该使用eventListener创建一个函数，以便在页面加载完成后执行？@MartynBall将JavaScript放在页脚中（就在结束正文标记之前）。这样，当您尝试访问所有
DOM
元素时，它们都已准备就绪。您的
document.querySelector
可以工作，但您需要添加
，因此它就是@Ginden指出的
document.querySelector（“#messageForm”）
window.onload = function () 
{ 
    //Event Listeners
    var messageForm = document.getElementById("messageForm");
    messageForm.addEventListener("submit",handleSubmit);
}