addEventListener点击不工作后，使用类似的功能打开一个表单

Question

我有问题，让addEventListener关闭我使用addEventListener打开的表单。

例如，下面是我打开表单的HTML、CSS和JS:

let addAlarmLink = document.getElementById('alarm-add');
let addAlarmForm = document.getElementById('adding-alarm');
addAlarmLink.addEventListener('click', () => {
if (addAlarmForm.style.display === 'none' || addFriendForm.style.display === 'none') {
addAlarmForm.style.display = 'block';
} else {
addAlarmForm.style.display = 'none';
}
});

#adding-alarm {
display: none;
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 25vw;
}

<section id="adding-alarm" style="display: none;">
<form id="alarm-form">
<h5 id="close">X</h5>
<h4>Adding Alarm</h4>
<input class="add-form-info" id="n-name" placeholder="Nickname" type="text" >
<input class="add-form-info" id="f-name" placeholder="First Name" type="text" >
<input class="add-form-info" id="l-name" placeholder="Last Name" type="text" >
<h4>Login Info </h4>
<input class="add-form-info" id="add-username-email" placeholder="Username or Email of Friend" type="text" >
<input class="login-info" id="add-alarm-submit" type="submit" value="Add Alarm">

</form>
</section>

这很好，表单打开并可编辑。然而，当设置addEventListener来关闭表单时，它不会触发，甚至不会被识别。下面是相应的代码:

let closeForm = document.getElementById('close');

closeForm.addEventListener('click', () => {

addAlarmForm.display.style = 'none';

});

这不起作用，我尝试了一些其他的方法，通过使用onClick和设置一个函数，但有相同的结果。我还尝试设置一个console.log只是吐出一条消息，我在控制台中什么也没有得到。我注意到的另一件事是，样式被推出了# addingalarm to element。

元素下显示的样式图片。样式而不是更新#add -alarm

是我做错了什么，还是有更好的办法让这一切发生?

这一切对我来说都很新鲜。

Answer 1

仅从您的代码中取出即可正常工作。下面是一个工作示例，在另一个答案中，唯一的问题是.style.display被错误地写成了.display.style。

let addAlarmLink = document.getElementById('alarm-add');
let addAlarmForm = document.getElementById('adding-alarm');
addAlarmLink.addEventListener('click', () => {
if (addAlarmForm.style.display === 'none' || addFriendForm.style.display === 'none') {
addAlarmForm.style.display = 'block';
} else {
addAlarmForm.style.display = 'none';
}
});
let closeForm = document.getElementById('close');
closeForm.addEventListener('click', () => {

addAlarmForm.style.display = 'none';

});

#adding-alarm {
display: none;
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 25vw;
}

<div class="add-option"> <p>Add an alarm to be reminded to do a task.</p> <i id="alarm-add" class="fas fa-plus-circle">+</i> </div>
<section id="adding-alarm" style="display: none;">
<form id="alarm-form">
<h5 id="close">X</h5>
<h4>Adding Alarm</h4>
<input class="add-form-info" id="n-name" placeholder="Nickname" type="text" >
<input class="add-form-info" id="f-name" placeholder="First Name" type="text" >
<input class="add-form-info" id="l-name" placeholder="Last Name" type="text" >
<h4>Login Info </h4>
<input class="add-form-info" id="add-username-email" placeholder="Username or Email of Friend" type="text" >
<input class="login-info" id="add-alarm-submit" type="submit" value="Add Alarm">

</form>
</section>

Answer 2

注意属性顺序混淆。在工作情况下，你有:

addAlarmForm.style.display = 'block';

在不工作的情况下你有:

addAlarmForm.display.style = 'none';

这很可能是你的错误。然而，你说什么都没有显示在控制台上，这是可疑的，因为显然应该有一些错误在控制台上(显示没有定义在HTMLElement)

Answer 3

您的代码实际上运行良好。它只需要一些清理和调整，这是我对你的代码所做的一些调整，它的工作如预期。

let addAlarmLink = document.getElementById('showForm');
let closeForm = document.getElementById("closeForm");
let addAlarmForm = document.getElementById('adding-alarm');
let addAlarmSubmit = document.getElementById("add-alarm-submit");
addAlarmLink.addEventListener('click', () => {
if (addAlarmForm.style.display === 'none') {
addAlarmForm.style.display = 'block';
addAlarmLink.style.display = 'none';
closeForm.style.display = 'block';
} else {
addAlarmForm.style.display = 'none';
}
});
if(closeForm.addEventListener("click", () => {
addAlarmForm.style.display = 'none';
closeForm.style.display = 'none';
addAlarmLink.style.display = 'block';
}));
if(addAlarmForm.addEventListener('click', (event) => {
event.preventDefault();
alert('form submitted successfully..!')
}));

#adding-alarm {
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 25vw;
}

<button id="showForm">show form</button>
<button id="closeForm" style="display: none;">Close form</button>
<section id="adding-alarm" style="display: none;">
<form id="alarm-form">

<h4>Adding Alarm</h4>
<input class="add-form-info" id="n-name" placeholder="Nickname" type="text" >
<input class="add-form-info" id="f-name" placeholder="First Name" type="text" >
<input class="add-form-info" id="l-name" placeholder="Last Name" type="text" >
<h4>Login Info </h4>
<input class="add-form-info" id="add-username-email" placeholder="Username or Email of Friend" type="text" >
<input class="login-info" id="add-alarm-submit" type="submit" value="Add Alarm">
</form>
</section>