Question

I got this code off of codepen and I am trying to edit it. I am trying to make it so that when you actually click the X in the corner of the popup, the box actually closes, and that after hitting the add button after putting in text, the box closes. Can anyone help me accomplish this? I am having trouble getting it to work. Any help is appreciated. Thanks! 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

Instead of doing that really complicated thing why you should do something like:

<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）

How can I make this calendar close correctly?

3 个答案: