Tengo problemas para que addEventListener cierre un formulario que abrí con addEventListener.
Por ejemplo, aquí está mi HTML, CSS y JS para abrir el formulario:
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>Esto funciona bien, el formulario se abre y es editable. Sin embargo, al configurar un addEventListener para cerrar el formulario, no se activa ni se reconoce. Aquí está el código para eso:
let closeForm = document.getElementById('close'); closeForm.addEventListener('click', () => { addAlarmForm.display.style = 'none'; });Esto no funcionó y lo probé de otras maneras usando onClick y configurando una función, pero obtuve los mismos resultados. También intenté configurar un archivo console.log para que solo emitiera un mensaje y no obtuve nada en la consola. Otra cosa que noté es que el estilo se elimina de #adding-alarm a element.style al inspeccionar los estilos.
imagen de estilo que se muestra debajo de element.style en lugar de actualizar #adding-alarm
¿Hay algo que esté haciendo mal o algo mejor para que esto suceda?
Todo esto es muy nuevo para mi.
Está funcionando bien tomado solo de su código. Aquí hay un ejemplo de trabajo en el fragmento a continuación, el único problema se dijo en la otra respuesta que es .style.display está escrito incorrectamente como .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>Su código en realidad está funcionando bien. solo necesita un poco de limpieza y algunos ajustes, aquí hay algunos ajustes que hice en su código y funciona como se esperaba.
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>Observe el orden mezclado de propiedades. En caso de trabajo tienes:
addAlarmForm.style.display = 'block';Y en caso de no funcionar tienes:
addAlarmForm.display.style = 'none';Es probable que este sea tu error. Sin embargo, dijo que no se muestra nada en la consola, y es sospechoso porque claramente debería haber algún error en la consola (la visualización no está definida en HTMLElement)