在使用類似的函式打開一個表單后，addEventListener點擊不作業了

我在讓 addEventListener 關閉我使用 addEventListener 打開的表單時遇到了問題。

例如，以下是我用于打開表單的HTML、CSS和JS：

</style> 

#adding-alarm {
    display: none;
    z-index: 1;
    位置：固定。
    頂部。50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 25vw;
}
</style> 
<section id="add-alarm"  style="display: none;">
        <form id="alarm-form"/span>>
        <h5 id="close"/span>> X</h5>/span>
        <h4>添加報警</h4>/span>
        < input class="add-form-info"  id="n- name" placeholder="Nickname" type="text" > 
        < input class="add-form-info"/span> id="f- name" placeholder="First Name" type="text" > 
        < input class="add-form-info"/span> id="l- name" placeholder="Last Name" type="text" > 
        <h4>登錄資訊 </h4>/span>
        < input class="add-form-info" id="add-usernam- email" placeholder="朋友的用戶名或電子郵件" type="text" > 
        < input class="login-info"/span> id="add- alarm-submit" type="submit" value="add alarm"> 
        
    </form> 
</section>/span>


<script>
let addAlarmLink = document.getElementById('alarm-add') 。
let addAlarmForm = document.getElementById('add-alarm') 。

addAlarmLink.addEventListener('click', () =>  {
    if (addAlarmForm.style.display =='none'| addFriendForm. style.display === 'none') {
        addAlarmForm.style.display = 'block'/span>;
    } else {
        addAlarmForm.style.display = 'none';
    }
});
</script>>

這樣做很好，表單可以打開并且可以編輯。然而，當設定一個addEventListener來關閉表單時，它沒有被觸發，甚至沒有被識別。以下是相關的代碼：

這并不奏效，我通過使用onClick和設定一個函式嘗試了其他一些方法，但結果是一樣的。我還試著設定了一個 console.log 來吐出一條資訊，但我在控制臺中什么都沒有得到。我注意到的另一件事是，在檢查樣式時，樣式被從#adding-alarm推送到element.style。

顯示在 element.style 下的樣式圖片而不是更新 #adding-alarm

是否有什么地方我做錯了，或者有什么更好的方法來使這種情況發生？

這對我來說都是非常新鮮的事情。

uj5u.com熱心網友回復：

注意到屬性的混合順序。在作業案例中，你有：

addAlarmForm.style.display = 'block'；

而在不作業的情況下，你有：

addAlarmForm.display.style = 'none'; 

這可能是你的錯誤。然而，你說控制臺沒有顯示任何東西，這很可疑，因為顯然控制臺應該有一些錯誤(Display is not defined on HTMLElement)

uj5u.com熱心網友回復：

從你的代碼中可以看出，它作業得很好。 下面是一個作業例子，在下面的片段中，唯一的問題是在另一個答案中被告知，.style.display被錯誤地寫成.display.style。

let addAlarmLink = document. getElementById（'alarm-add'）。
let addAlarmForm = document.getElementById('add-alarm') 。

addAlarmLink.addEventListener('click', () =>  {
  if (addAlarmForm.style.display =='none'| addFriendForm. style.display === 'none') {
    addAlarmForm.style.display = 'block'/span>;
  } else {
    addAlarmForm.style.display = 'none';
  }
});

let closeForm = document.getElementById('close') 。
closeForm.addEventListener('click', ( ) => {
    
    addAlarmForm.style.display = 'none'/span>;
    
});

span class="hljs-selector-id">#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"/span>>  <p>添加一個警報，以提醒做一個任務。 </p> < i id="alarm-add" class="fas fa-plus-circle" >  </i> </div> </

<section id="add-alarm" style=display: none;">
        <form id="alarm-form"/span>>
        <h5 id="close"/span>> X</h5>/span>
        <h4>添加報警</h4>/span>
        < input class="add-form-info"  id="n- name" placeholder="Nickname" type="text" > 
        < input class="add-form-info"/span> id="f- name" placeholder="First Name" type="text" > 
        < input class="add-form-info"/span> id="l- name" placeholder="Last Name" type="text" > 
        <h4>登錄資訊 </h4>/span>
        < input class="add-form-info" id="add-usernam- email" placeholder="朋友的用戶名或電子郵件" type="text" > 
        < input class="login-info"/span> id="add- alarm-submit" type="submit" value="add alarm"> 
        
    </form> 
</section>/span>

uj5u.com熱心網友回復：

你的代碼實際上運行良好。它只需要一些清理和一些調整。 下面是我對你的代碼所做的一些調整，它可以如期運行。

let addAlarmLink = document. getElementById（'showForm'）。
let closeForm = document.getElementById("closeForm") 。
let addAlarmForm = document.getElementById('add-alarm') 。

let addAlarmSubmit = document.getElementById("add-alarm-submit") 。

addAlarmLink.addEventListener('click', () =>  {
    if (addAlarmForm.style.display == 'none') {
        addAlarmForm.style.display = 'block'/span>;
        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) => /span>{
    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"/span> style="display: none;">關閉表單</按鈕>/span>

<section id="add-alarm"  style="display: none;">
        <form id="alarm-form"/span>>
        
        <h4>添加報警</h4>/span>
        < input class="add-form-info"  id="n- name" placeholder="Nickname" type="text" > 
        < input class="add-form-info"/span> id="f- name" placeholder="First Name" type="text" > 
        < input class="add-form-info"/span> id="l- name" placeholder="Last Name" type="text" > 
        <h4>登錄資訊 </h4>/span>
        < input class="add-form-info" id="add-usernam- email" placeholder="朋友的用戶名或電子郵件" type="text" > 
        < input class="login-info"/span> id="add- alarm-submit" type="submit" value="add alarm"> 
    </form> 
</section>/span>

標籤：

上一篇：如何在懸停子分部時使背景影像平穩地變化？

下一篇：如何使表格與其他元素在同一行中對齊？