Im having issues with getting addEventListener to close a form that I opened using addEventListener.
For example, here is my HTML, CSS and JS for opening the form:
</style>
#adding-alarm {
display: none;
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
width: 25vw;
}
</style>
<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>
<script>
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';
}
});
</script>
This works fine, the form opens and is editable. However, when setting up a addEventListener to close the form, its not triggering or even being recognized. Here's the code for that:
let closeForm = document.getElementById('close');
closeForm.addEventListener('click', () => {
addAlarmForm.display.style = 'none';
});
This did not work and i tried it a few other ways by using onClick and setting up a function but had the same results. I also tried setting up a console.log to just spit out a message and i get nothing in the console. One other thing i noticed is that style gets pushed out of #adding-alarm to element.style when inspecting the styles.
picture of style showing under element.style rather than updating #adding-alarm
Is there something im doing wrong or a better to make this happen?
This is all very new to me.
CodePudding user response：
Notice mixed up order of properties. In working case you have:
addAlarmForm.style.display = 'block';
And in not working case you have:
addAlarmForm.display.style = 'none';
This is likely to be your error. However, you said nothing is showing on the console, and it's suspicious because clearly there should be some error on the console (display is not defined on HTMLElement)
CodePudding user response：
It is working fine taken from your code only . Here is a working example in snippet below ,the only problem was told in the other answer that is .style.display is wrongly written as .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>CodePudding user response：
Your code is actually running fine. it only need some clean up and few adjustment, here is some adjustment I made to your code and it works as expected.
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>