【发布时间】：2018-10-07 05:32:34
【问题描述】：
我目前正在自学 JavaScript，并尝试使用一个简单的调度程序应用程序练习 DOM 操作，该程序程序应用程序接受表单中的信息（获取日期、名称和事件描述），然后将表单响应插入日历对应天。
我基本上使用了一个for循环来循环整个日历以找到与表单中选择的日期相对应的日期，如果相等，则输入值将放在日期下方。
（为了简单起见，我们暂时假设日历只能包含 2018 年 10 月的日期。）
非常感谢您的帮助！
const dateInput = document.getElementById('date');
const nameInput = document.getElementById('who');
const remarksInput = document.getElementById('remarks');
const eventAdderButton = document.getElementById('event-adder-button');
const calendar = document.getElementsByClassName('days');
eventAdderButton.addEventListener('click', () => {
const date = dateInput.value.slice(3,5);
for (let i = 0; i < calendar.length; i += 1) {
const calendardays = calendar[i].getElementsByTagName('td');
for (let j = 0; j < calendardays.length; j += 1) {
if (calendardays[j].textContent == date) {
const newEvent = document.createElement('p');
newEvent.textContent = remarksInput.value + nameInput.value;
calendardays[j].innerHTML = "<p>" + calendardays[j] + "</p>" + newEvent.innerHTML;
}
}
}
})body {
text-align: center;
box-sizing: border-box;
}
h2 {
color: inherit;
}
.intro-wrapper {
background-color: #45d1a0;
padding: 10px;
margin: 10px 10px;
}
#intro {
background-color: #45d1a0;
color: white;
font-family: "Chelsea Market";
border-style: double;
border-color: white;
border-width: thick;
padding: 10px;
margin: 10px 10px;
}
.form-wrapper {
background-color: #d15545;
font-family: "Chelsea Market";
padding: 10px;
margin: 10px 10px;
}
.form-start {
color: white;
border-style: double;
border-color: white;
border-width: thick;
padding: 10px;
margin: 10px 10px;
}
label, #event-adder-button {
margin-top: 20px;
}
#date, #who, #remarks {
margin: 0 auto;
text-align: center;
width: 300px;
}
.calendar-wrapper {
background-color: #03f;
color: white;
font-family: "Chelsea Market";
padding: 10px;
margin: 10px 10px;
}
ul {list-style-type: none;}
/* Month header */
.month {
padding: 25px 25px;
background: #1abc9c;
text-align: center;
}
/* Month list */
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Previous button inside month header */
.month .prev {
float: left;
padding-top: 10px;
}
/* Next button */
.month .next {
float: right;
padding-top: 10px;
}
/* calendar table */
.calendar-table {
width: 100%;
}
/* Weekdays (Mon-Sun) */
.weekdays {
margin: 0;
padding: 10px 0;
background-color:#ddd;
width: 100%;
}
.weekdays th {
width: 10%;
color: #666;
text-align: center;
border: solid;
}
/* Days (1-31) */
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days td {
width: 10%;
height: 100px;
margin-bottom: 5px;
padding-top: 5px;
font-size:12px;
color: #777;
border: solid;
text-align: left;
vertical-align: top;
}
/* Highlight the "current" day */
.days td .active {
padding: 3px;
background: #1abc9c;
color: white !important
}<!DOCTYPE HTML>
<html>
<head>
<title>My Calendar Application</title>
<link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Banner -->
<div class="intro-wrapper">
<section id="intro">
<p></p>
<h2>Manage your Schedule</h2>
<p>Add. Share. And Enjoy!</p>
</section>
</div>
<div class="form-wrapper">
<section id="one">
<div class="form-start">
<header>
<h2>Add an Event</h2>
</header>
<form method="post" action="#">
<div>
<label for="date">Date</label>
<br>
<input name="date" id="date" type="date">
</div>
<br>
<div>
<label for="who">With Whom?</label>
<br>
<input name="who" id="who" type="text">
</div>
<br>
<div>
<label for="remarks">Remarks</label>
<br>
<textarea name="remarks" id="remarks" rows="4"></textarea>
</div>
<input value="Add Event" type="submit" id="event-adder-button"></li>
</form>
</div>
</section>
</div>
<!--end of Form-->
<!-- Calendar -->
<section class="calendar-wrapper">
<div class="inner">
<h2>Calendar</h2>
</div>
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>October<br><span style="font-size:18px">2018</span></li>
</ul>
</div>
<div>
<table class="calendar-table">
<tr class="weekdays">
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
<th>Su</th>
</tr>
<tr class="days">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="days">
<td>8</td>
<td>9</td>
<td><span class="active">10</span></td>>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr class="days">
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr class="days">
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr class="days">
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="app.js"></script>
</body>
</html>【问题讨论】：
-
您遇到的具体问题是什么？
-
我尝试通过填写表单来添加事件，但没有任何结果。单击添加事件按钮立即将我带回页面顶部。感谢您的回复！
-
而
dateInput.value将always look likeyyyy-mm-dd。
标签： javascript html dom innerhtml