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

Issue

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.

Solution

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>

Answered By - Rana