如何使該日歷正確關閉？

Question

我從Codepen中獲得了此代碼，並且正在嘗試對其進行編輯。 我試圖這樣做，以便當您實際單擊彈出窗口一角的X時，該框實際上會關閉，並且在輸入文本后單擊添加按鈕后，該框會關閉。 誰能幫我做到這一點？ 我無法使其正常工作。 任何幫助表示贊賞。 謝謝！ https://codepen.io/pokyparachute66/pen/QzXYjL

 var date = document.getElementsByClassName("day"); for(i = 0; i < 50; i++){ var event = document.createElement("div"); event.id = "add"; event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>"; date[i].appendChild(event); var btn = document.createElement("button"); btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>"; event.appendChild(btn); btn.addEventListener("click", createEvent); date[i].addEventListener("click", clickEvent); event.getElementsByClassName("close")[0].addEventListener("click", closeEvent); } function createEvent(){ var parent = this.parentElement; var parentDay = parent.parentElement; if(parent.getElementsByTagName("input")[0].value === "" ){ alert("type something"); } else{ var createDiv = document.createElement("div"); createDiv.id = "eventDiv"; parent.appendChild(createDiv); parentDay.classList.add("active"); var txt = parent.getElementsByTagName("input")[0].value; createDiv.innerHTML = txt; parent.getElementsByTagName("input")[0].value = ""; //parent.style.visibility = "visible"; } } function clickEvent(){ var a = this.getElementsByTagName("div")[0]; a.classList.toggle("active"); } function closeEvent(){ document.getElementById("add").classList.remove("active"); } 

 button:focus, input:focus{outline: none;} .calendar{ margin: calc(50vh - 100px) auto 0 auto; width: 260px; height: 200px; text-align: center; transform: scale(2.5); } .day{ position: relative; margin: 2px; width: 33px; height: 33px; font-size: 12px; line-height: 30px; border-radius: 100%; float: left; cursor: pointer; transition: all .4s ease 0s; } .day:hover{ color: #fff; background: #3f64fd; } .day-week{ margin: 0px; width: 37px; height: 20px; color: #515067; font-size: 9px; line-height: 20px; text-transform: uppercase; float: left; } .blank{ margin: 0px ; width: 37px; height: 37px; float: left; } #add{ padding: 15px; position: absolute; left: -90px; bottom: 50px; width: 200px; min-height: 50px; background: linear-gradient(to top left, #3f64fd, #14c0ff); transition: all .2s ease 0s; visibility: hidden; opacity: 0; box-shadow: 0 0 25px rgba(0,0,0,.6); } #add.active, #add:hover{ bottom: 30px; visibility: visible; opacity: 1; transition: all .4s ease 0s; z-index: 999; } #add .close{ position: absolute; top: 0px; right: 5px; color: white; } #add input[type="text"]{ width: 140px; padding: 3px 5px; color: #fff; background: none; border: none; border-bottom: 1px solid white; } #add button{ height: 50px; width: 50px; color: #fff; line-height: 23px; text-align: center; background: #3f64fd; border: none; left: 70%; top:53%; position: absolute; border-radius: 100%; cursor: pointer; } #eventDiv{ padding: 5px; line-height: 12px; text-align: left; } .day.active{ color: black; border: 2px solid #3f64fd; } 

 <div class="calendar"> <div class="day-week">s</div> <div class="day-week">m</div> <div class="day-week">t</div> <div class="day-week">w</div> <div class="day-week">t</div> <div class="day-week">f</div> <div class="day-week">s</div> <div class="blank"></div> <div class="blank"></div> <div class="day">1</div> <div class="day">2</div> <div class="day">3</div> <div class="day">4</div> <div class="day">5</div> <div class="day">6</div> <div class="day">7</div> <div class="day">8</div> <div class="day">9</div> <div class="day">10</div> <div class="day">11</div> <div class="day">12</div> <div class="day">13</div> <div class="day">14</div> <div class="day">15</div> <div class="day">16</div> <div class="day">17</div> <div class="day">18</div> <div class="day">19</div> <div class="day">20</div> <div class="day">21</div> <div class="day">22</div> <div class="day">23</div> <div class="day">24</div> <div class="day">25</div> <div class="day">26</div> <div class="day">27</div> <div class="day">28</div> <div class="day">29</div> <div class="day">30</div> <div class="day">31</div> </div> 

Answer 1

除了要做那么復雜的事情之外，為什么要做類似的事情：

 <input type="date"> 

Answer 2

在closeEvent函數期間，您要刪除“活動”類，但是元素沒有該類。 因此，直到您將鼠標移開框之外，它才關閉彈出窗口。

我將在JS的第18行上刪除closeEvent函數和對其的引用，並將clickEvent（）函數更改為如下形式：

function clickEvent(){
var a = this.getElementsByTagName("div")[0];
    a.classList.toggle("active");  
    if (!a.classList.contains('active')) {
        var parentOfA = a.parentNode;
        parentOfA.removeChild(a);
    }
}

這樣，您就可以從文檔中完全刪除元素，而不僅僅是更改其上的類。

Answer 3

我不明白您要完成什么！ 當您按X或+但關閉時，代碼確實令人困惑...

它正在創建一個id =“ add”的div元素大約50次？！

for(i = 0; i < 50; i++){

  var event = document.createElement("div");
  event.id = "add"; // should make this event.className = 'add';
  event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";
  date[i].appendChild(event);

不要忘記更改CSS（#add-> .add）和關閉事件（getElementById-> getElementsByClassName）