使用addEventListener打开表单后，绑定的关闭点击事件不生效如何解决？

你遇到的问题有三个核心原因：

• 语法错误：关闭表单的代码里样式属性顺序写反，addAlarmForm.display.style = 'none'是错误写法，正确顺序是元素.style.属性名 = 值
• 代码执行时机错误：如果你的JS代码放在DOM元素加载前执行，getElementById('close')会返回null，事件绑定直接失败，这也是你加console.log没有任何输出的核心原因
• 代码冗余错误：打开表单的逻辑里引用了未定义的变量addFriendForm，运行时会抛出异常，可能阻塞后续代码执行

另外你提到的element.style样式覆盖是正常现象：JS直接修改DOM的style属性优先级高于CSS ID选择器，所以会覆盖#adding-alarm里定义的display属性。

1. 基础修复（直接修正错误） #

先调整JS代码的执行时机，把所有DOM操作逻辑放到DOMContentLoaded回调中，保证DOM加载完成后再获取元素，同时修正所有语法错误：

document.addEventListener('DOMContentLoaded', () => {
    const addAlarmLink = document.getElementById('alarm-add');
    const addAlarmForm = document.getElementById('adding-alarm');
    const closeForm = document.getElementById('close');

    // 修复打开表单逻辑，删除未定义的addFriendForm判断
    addAlarmLink.addEventListener('click', () => {
        addAlarmForm.style.display = addAlarmForm.style.display === 'none' ? 'block' : 'none';
    });

    // 修复关闭表单的属性顺序错误
    closeForm.addEventListener('click', () => {
        addAlarmForm.style.display = 'none';
    });
});

将所有JS代码按上述写法调整后，基础功能就可以正常运行。

2. 优化实现（更易维护的方案） #

推荐用CSS类切换代替直接修改style属性，避免样式优先级冲突，维护起来更方便：
首先新增CSS类：

.hidden {
    display: none !important;
}

然后删除HTML里section标签上的行内style="display: none;"，给section直接加hidden类：

<section id="adding-alarm" class="hidden">
<!-- 表单内容不变 -->
</section>

JS代码调整为切换类即可：

document.addEventListener('DOMContentLoaded', () => {
    const addAlarmLink = document.getElementById('alarm-add');
    const addAlarmForm = document.getElementById('adding-alarm');
    const closeForm = document.getElementById('close');

    addAlarmLink.addEventListener('click', () => {
        addAlarmForm.classList.toggle('hidden');
    });

    closeForm.addEventListener('click', () => {
        addAlarmForm.classList.add('hidden');
    });
});

额外可以给关闭按钮加点击提示样式：

#close {
    cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Jeremy Grayson