javascript - 使用 Javascript 和 JQuery 的日历按钮问题

Question

我正在尝试整理一个事件管理日历，但我的 javascript 似乎无法正常工作。我正在尝试添加一个允许用户创建新事件的按钮，但该按钮根本不起作用。

这是 HTML 和 Javascript/Jquery。我还添加了 CSS 以防万一

< script src = "jquery-3.3.1.min.js" >
  var newEventHolder = document.getElementById("newEventHolder");
var eventForm = document.getElementById("newEventForm");
var eventDate = document.getElementById("eventDate");
var addEvent = document.getElementById("addEvent");
var cancel = document.getElementById("cancelAddEvent");
var upcomingEvents = document.getElementById("upcomingEvents");
var eventHolder = document.getElementById("eventHolder");
var removeEvent = document.getElementById("removeEvent");

// Show New Event form

$(newEventHolder).click(function() {
  $(eventForm).slideDown(400);
});

// Add Datepicker to Date input
$(eventDate).datepicker();

// Close New Event form
$(cancel).click(function() {
  $(eventForm).slideUp(400);
});

// Delete icon removed event from list
$(removeEvent).click(function() {
  $(eventHolder).addClass('hide').stop();
}); <
/script>

.container {
  margin: 50px auto;
  width: 900px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}
#newEventHolder {
  margin-bottom: 10px;
  width: 100%;
  height: 100px;
  border: 3px dashed #85b9e4;
  text-align: center;
  line-height: 4;
  font-size: 24px;
  color: #85b9e4;
  box-sizing: border-box;
  border-radius: 3px;
}
#newEventHolder:hover {
  border: 3px dashed #3289d2;
  color: #3289d2;
  cursor: pointer;
}
#newEventForm {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  display: none;
}
#newEventForm label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #244674;
}
#newEventForm input[type="text"] {
  padding-left: 15px;
  margin-bottom: 20px;
  height: 50px;
  width: 100%;
  line-height: 1.875;
  font-size: 16px;
  color: #a7c1d9;
  border: 2px solid #c4ddf2;
  outline: 0;
  box-sizing: border-box;
  background: #f6fafd;
}
#newEventForm input[type="text"]:focus {
  background: #fff;
  border: 2px solid #9ac5e9;
}
#newEventForm textarea {
  margin-bottom: 20px;
  padding: 5px;
  height: 120px;
  width: 100%;
  line-height: 1.875;
  font-size: 16px;
  color: #a7c1d9;
  border: 2px solid #c4ddf2;
  outline: 0;
  box-sizing: border-box;
  border-radius: 3px;
  background: #f6fafd;
}
#newEventForm textarea:focus {
  background: #fff;
  border: 2px solid #9ac5e9;
}
#newEventForm button {
  margin-right: 10px;
  padding: 0 15px;
  background: #849ebf;
  color: #eef5fb;
  font-size: 16px;
  font-weight: 400;
  border: 0;
  outline: 0;
  line-height: 3.5;
  border-radius: 3px;
  cursor: pointer;
}
#newEventForm button:hover {
  background: #6284ae;
}
#newEventForm button#cancelAddEvent {
  background: #d9e9f7;
  color: #4c6a91;
  cursor: pointer;
}
#newEventForm button#cancelAddEvent:hover {
  background: #c4ddf2;
}
#eventHolder {
  padding: 17px 15px;
  margin-bottom: 10px;
  background: #c4ddf2;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  border-radius: 3px;
}
#eventHolder::after {
  content: "";
  display: table;
  clear: both;
}
#eventHolder .event-date-holder {
  float: left;
  background: #a7c1d9;
  margin-right: 20px;
  padding: 10px;
  width: 50px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 1px 0px 0px #d9e9f7;
}
#eventHolder .event-date-holder #dateNumber {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #0c1726;
}
#eventHolder .event-date-holder #dateDay {
  text-transform: uppercase;
}
#eventHolder .event-details-holder {
  float: left;
  width: 520px;
  line-height: 3.2;
}
#eventHolder .event-details-holder::after {
  content: "";
  display: table;
  clear: both;
}
#eventHolder .event-details-holder h1 {
  float: left;
  margin-right: 30px;
  vertical-align: bottom;
  font-size: 20px;
  font-weight: 600;
  color: #244674;
}
#eventHolder .event-details-holder span#eventDescription {
  position: relative;
  padding-top: 4px;
  color: #0f2b42;
  float: left;
  font-size: 18px;
}
#eventHolder .event-details-holder span#eventDescription::before {
  content: "//";
  position: absolute;
  left: -20px;
  color: #2a7cc0;
}
#eventHolder .event-details-holder ul#editTools {
  float: right;
  margin: 0px 0px 0px 10px;
  padding: 0px;
}
#eventHolder .event-details-holder ul#editTools li {
  display: inline;
  margin-right: 15px;
  padding-top: 5px;
  font-size: 20px;
  color: #5ca1db;
}
#eventHolder .event-details-holder ul#editTools li .fa {
  text-decoration: 0px 1px 0px 0px #d9e9f7;
}
#eventHolder .event-details-holder ul#editTools li .fa:hover {
  color: #3289d2;
  cursor: pointer;
}
#eventHolder .event-details-holder ul#editTools li:last-child {
  margin-right: 0;
}
.hide {
  display: none;
}
ul {
  list-style-type: none;
}

  <div id="newEventForm">
    <label for="event-date">Event Date</label>
    <input type="text" id="eventDate">
    <label for="event-title">Event Title</label>
    <input type="text" name="event-title" id="eventTitleInput" 
maxlength="80" />
    <label for="event-description">Description</label>
    <textarea name="event-descripton" id="eventDescriptionInput">Event 
Description</textarea>
    <button name="add-event" id="addEvent">Add New Event</button>
    <button name="cancel-add-event" id="cancelAddEvent">Cancel</button>
  </div>

  <ul id="upcomingEvents">
    <li id="eventHolder">
      <div class="event-date-holder">
        <span id="dateNumber">23</span>
        <span id="dateDay">Jan</span>
      </div>
      <div class="event-details-holder">
        <h1>Akron Flea</h1>
        <span id="eventDescription">Lorem ipsum dolar sit amet&hellip; 
</span>
        <ul id="editTools">
          <li><i class="fa fa-pencil-square-o"></i></li>
          <li><i class="fa fa-bars"></i></li>
          <li><i class="fa fa-times" id="removeEvent"></i></li>
        </ul>
      </div>
    </li>

    <li id="eventHolder">
      <div class="event-date-holder">
        <span id="dateNumber">23</span>
        <span id="dateDay">Jan</span>
      </div>
      <div class="event-details-holder">
        <h1>Cleveland Flea</h1>
        <span id="eventDescription">Lorem ipsum dolar sit amet&hellip; 
</span>
        <ul id="editTools">
          <li><i class="fa fa-pencil-square-o"></i></li>
          <li><i class="fa fa-bars"></i></li>
          <li><i class="fa fa-times" id="removeEvent"></i></li>
        </ul>
      </div>
    </li>

    <li id="eventHolder">
      <div class="event-date-holder">
        <span id="dateNumber">23</span>
        <span id="dateDay">Jan</span>
      </div>
      <div class="event-details-holder">
        <h1>Columbus Flea</h1>
        <span id="eventDescription">Lorem ipsum dolar sit amet&hellip; 
enter code here</span>
        <ul id="editTools">
          <li><i class="fa fa-pencil-square-o"></i></li>
          <li><i class="fa fa-bars"></i></li>
          <li><i class="fa fa-times" id="removeEvent"></i></li>
        </ul>
      </div>
      <li>
  </ul>
</div>

编辑*我很抱歉，我已经添加了代码的其余部分来发现潜在的问题。

标签： javascriptjquery