表单验证无法运行，调用addEventListener抛出Uncaught Type Error如何解决

核心报错原因 #

• JS执行时机早于DOM渲染完成：当前JS代码运行时，id为submit-el的按钮还未被浏览器解析渲染到DOM树中，document.getElementById('submit-el')自然返回null，调用null的addEventListener方法就会抛出类型错误。
• 隐藏逻辑问题：document.getElementsByClassName('alertMessage')返回的是HTML集合对象，不是单个DOM元素，直接对它设置style.display也会触发后续报错。

修复方案 #

• 调整JS执行时机，保证DOM加载完成后再执行选择元素的逻辑：要么把全部JS代码放到</body>标签之前，要么用DOMContentLoaded事件包裹逻辑。
• 修正alertMessage元素的选择方式，取集合的第一个元素或者用querySelector直接选中单个元素。

修正后的完整代码 #

<div class='form-actions-container call-to-action'>
        <button id='submit-el' class='colored button FormBtn' 
        type='submit'>SUBMIT</button>
</div>
<div class="alertMessage">
        <h2 class="fill_text">PLEASE FILL OUT ALL QUESTIONS.</h2> 
        <h3 class="fill_text">Thank you.</h3>
</div>

<script>
// 等待DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    const option = document.getElementsByName('pending_subscriber[custom_fields][302]');
    let submitEl = document.getElementById('submit-el');
    // 修正元素选择，直接选中单个alertMessage元素
    const error = document.querySelector('.alertMessage');

    submitEl.addEventListener('click', function (e) {
        // 可选链防止option元素不存在时触发额外报错
        if (!(option[0]?.checked || option[1]?.checked)) {
            error.style.display = 'block';
            // 阻止表单默认提交行为，兼容性优于return false
            e.preventDefault();
            return false;
        }
    });
})
</script>

内容的提问来源于stack exchange，提问作者John Patricio