使用类似功能打开表单后，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 来只是吐出一条消息，但我在控制台中什么也得不到。我注意到的另一件事是，在检查样式时，样式从#adding-alarm 中推出到 element.style。

picture of style showing under element.style rather than updating #adding-alarm

我是不是做错了什么，或者有更好的方法来实现这一点？

这对我来说都是全新的。

Answer 1

注意混淆了属性的顺序。在工作案例中你有：

addAlarmForm.style.display = 'block';

在不工作的情况下你有：

addAlarmForm.display.style = 'none';

这很可能是你的错误。但是，您说控制台上没有显示任何内容，这很可疑，因为控制台上显然应该有一些错误（显示未在 HTMLElement 上定义）

Answer 2

仅从您的代码中获取的代码工作正常。这是下面代码片段中的一个工作示例，另一个答案中提到的唯一问题是 .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 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>

使用类似功能打开表单后，addEventListener 单击不起作用

addEventListener click not working after using similar function to open a form

html

javascript

css

onclick

addeventlistener