如何使用JavaScript显示HTML中的<select>选项？
How to display the selected option of a <select> in HTML using JavaScript?
我正在尝试使用我在 JavaScript 中创建的 HTML 元素显示 selected 选项。 select 元素具有三个选项：“当天”、“之前”和“之后”。
接下来应该发生的是，在单击右下角的添加按钮后，selected 选项（例如，“之前”）应该出现在提醒列表的“时间”列中。
在 JavaScript 文件中，我有一个名为 changeInnerHTML(sel) 的函数，它应该将该列的 innerHTML 更改为 selected 选项。但是，每次单击其中一个选项时，浏览器控制台中都会出现此错误：Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at changeInnerHTML (Create Event.js:195:54)。
这是整个 JS 文件：
var br = document.createElement("br");
function create_reminder() {
let form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "");
form.setAttribute("id", "reminder_form");
// When
let reminder_status_label = document.createElement("label");
reminder_status_label.setAttribute("for", "reminder_status");
reminder_status_label.innerHTML = "When";
let reminder_status = document.createElement("select");
reminder_status.setAttribute("name", "reminder_status");
reminder_status.setAttribute("id", "reminder-status-sel");
reminder_status.setAttribute("onChange", "setReminderWhen(this);changeInnerHTML(this);");
let reminder_status_1 = document.createElement("option");
reminder_status_1.setAttribute("value", "on-the-day");
reminder_status_1.innerHTML = "On the day";
let reminder_status_2 = document.createElement("option");
reminder_status_2.setAttribute("value", "before");
reminder_status_2.innerHTML = "Before";
let reminder_status_3 = document.createElement("option");
reminder_status_3.setAttribute("value", "After");
reminder_status_3.innerHTML = "After";
// Note
let note_label = document.createElement("label");
note_label.setAttribute("for", "note");
note_label.innerHTML = "Note";
let note = document.createElement("textarea");
note.setAttribute("name", "note");
note.setAttribute("id", "reminder-note");
note.setAttribute("row", "10");
note.setAttribute("col", "60");
// Send to
let send_to_label = document.createElement("label");
send_to_label.setAttribute("for", "send-to");
send_to_label.innerHTML = "Send to";
let send_to = document.createElement("select");
send_to.setAttribute("name", "send-to");
send_to.setAttribute("onChange", "setReminderWhen(this);");
let blank = document.createElement("option");
blank.setAttribute("value", "--");
let email_1 = document.createElement("option");
email_1.setAttribute("value", "naa1234@cohousing.site");
email_1.innerHTML = "naa1234@cohousing.site";
let email_2 = document.createElement("option");
email_2.setAttribute("value", "sd4567@cohousing.site");
email_2.innerHTML = "sd4567@cohousing.site";
let email_3 = document.createElement("option");
email_3.setAttribute("value", "mk7890@cohousing.site");
email_3.innerHTML = "mk7890@cohousing.site";
let email_4 = document.createElement("option");
email_4.setAttribute("value", "jk0123@cohousing.site");
email_4.innerHTML = "jk0123@cohousing.site";
let email_5 = document.createElement("option");
email_5.setAttribute("value", "ms3456@cohousing.site");
email_5.innerHTML = "ms3456@cohousing.site";
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("id", "add-reminder-to-list-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let cancel_reminder_btn = document.createElement("button");
cancel_reminder_btn.setAttribute("type", "button");
cancel_reminder_btn.setAttribute("name", "cancel_reminder");
cancel_reminder_btn.setAttribute("id", "cancel-reminder-to-list-btn");
cancel_reminder_btn.innerHTML = "Cancel";
cancel_reminder_btn.setAttribute("onclick", "document.getElementById('reminder_form').style.visibility='hidden'");
// Form
form.appendChild(br.cloneNode());
form.appendChild(reminder_status_label);
form.appendChild(br.cloneNode());
form.appendChild(reminder_status);
reminder_status.appendChild(reminder_status_1);
reminder_status.appendChild(reminder_status_2);
reminder_status.appendChild(reminder_status_3);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(note_label);
form.appendChild(br.cloneNode());
form.appendChild(note);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(send_to_label);
form.appendChild(br.cloneNode());
form.appendChild(send_to);
send_to.appendChild(blank);
send_to.appendChild(email_1);
send_to.appendChild(email_2);
send_to.appendChild(email_3);
send_to.appendChild(email_4);
send_to.appendChild(email_5);
form.appendChild(br.cloneNode());
form.appendChild(add_reminder_btn);
form.appendChild(cancel_reminder_btn);
document.getElementById("reminder")
.appendChild(form);
}
function list_reminder() {
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("class", "add-reminder-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let reminder_table = document.createElement("table");
reminder_table.setAttribute("id", "reminder-table");
let reminder_table_head = document.createElement("thead");
reminder_table_head.setAttribute("id", "reminder-list-header");
let reminder_table_col_1 = document.createElement("th");
reminder_table_col_1.innerHTML = "Send to";
let reminder_table_col_2 = document.createElement("th");
reminder_table_col_2.innerHTML = "When";
let reminder_table_col_3 = document.createElement("th");
let reminder_table_body = document.createElement("tbody");
let reminder_table_row = document.createElement("tr");
let reminder_table_cell_1 = document.createElement("td");
reminder_table_cell_1.setAttribute("class", "reminder-list");
let reminder_table_cell_2 = document.createElement("td");
reminder_table_cell_2.setAttribute("class", "reminder-list");
reminder_table_cell_2.setAttribute("id", "reminder-when");
let reminder_table_cell_3 = document.createElement("td");
reminder_table_cell_3.setAttribute("class", "reminder-list");
reminder_table_cell_1.innerHTML = "abc1234@cohousing.site";
// reminder_table_cell_2.innerHTML = "";
let edit_reminder_btn = document.createElement("button");
edit_reminder_btn.setAttribute("type", "button");
edit_reminder_btn.setAttribute("name", "edit_reminder");
edit_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
edit_reminder_btn.innerHTML = "Edit";
let delete_reminder_btn = document.createElement("button");
delete_reminder_btn.setAttribute("type", "button");
delete_reminder_btn.setAttribute("name", "delete_reminder");
delete_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
delete_reminder_btn.innerHTML = "Delete";
reminder_table.appendChild(reminder_table_head);
reminder_table_head.appendChild(reminder_table_col_1);
reminder_table_head.appendChild(reminder_table_col_2);
reminder_table_head.appendChild(reminder_table_col_3);
reminder_table.appendChild(reminder_table_body);
reminder_table_body.appendChild(reminder_table_row);
reminder_table_row.appendChild(reminder_table_cell_1);
reminder_table_row.appendChild(reminder_table_cell_2);
reminder_table_row.appendChild(reminder_table_cell_3);
reminder_table_cell_3.appendChild(edit_reminder_btn);
reminder_table_cell_3.appendChild(delete_reminder_btn);
document.getElementById("reminder")
.appendChild(add_reminder_btn);
document.getElementById("reminder")
.appendChild(reminder_table);
}
// Used to ensure that values are being read
function setReminderWhen(sel) {
alert(sel.options[sel.selectedIndex].text);
}
function changeInnerHTML(sel) {
document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text;
}
这里是 HTML 和 CSS:
h1 {
text-align: center;
color: black;
}
body, input, select, option, textarea {
font-size: 30px;
font-family: verdana;
color: #666666;
}
input, select, textarea {
border: 1px solid #e8e8e8;
}
input, select, option {
background: #e8e8e8;
padding: 10px 10px 10px 10px;
}
textarea {
background: #e8e8e8;
width: 100%
}
#guest-room-address {
width: 30%;
}
#reminder {
margin-top: 30px;
border: 3px #e8e8e8 solid;
padding: 10px 0px 60px 10px;
}
.add-reminder-btn {
float: right;
font-size: 30px;
border: 2px solid white;
background-color: white;
font-weight: bold;
font-family: verdana;
text-transform: uppercase;
}
#add-reservation-btn {
float: right;
font-size: 30px;
color: white;
background-color: #363636;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn {
float: right;
font-size: 30px;
color: black;
background-color: white;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
margin-right: 30px;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn a:link {
color: black;
text-decoration: none;
}
#cancel-reservation-btn a:visited {
color: black;
text-decoration: none;
}
#cancel-add-btns {
margin-top: 30px;
}
#reminder-list-header {
background: #e8e8e8;
text-transform: uppercase;
}
td.reminder-list {
margin-top: 10px;
padding: 20px 10px 10px 20px;
width: 10%;
}
.edit-delete-reminder-btns {
border: 3px solid #363636;
background: white;
font-size: 25px;
font-weight: verdana;
text-transform: uppercase;
padding: 20px;
margin: 0px 40px 0px 20px;
}
.edit-delete-reminder-btns:hover {
background: #363636;
color: white;
}
#add-reminder-to-list-btn {
border: 1px solid #363636;
background: #363636;
color: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#cancel-reminder-to-list-btn {
border: 1px solid white;
background: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#reminder-note {
width: 98%;
}
#reminder-table {
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Add Event to Main Calendar</title>
<meta name="viewport" width="device-width, initial-scale=1">
<link rel="stylesheet" href="Create Event.css">
<script type="text/javascript" src="Create Event.js"></script>
</head>
<body>
<div>
<h1>Add Reservation to Guest Room Calendar</h1>
<hr>
<form action="SMTWTFS Control Page 1.html" method="post">
<label for="check-in-date">Check-in Date</label>
<br>
<input type="date" name="check-in-date" min="2022-05-18" required>
<br>
<br>
<label for="check-in-time">Check-in Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="check-out-date">Check-out Date</label>
<br>
<input type="date" name="check-out-date" min="2022-05-18" required>
<br>
<br>
<label for="check-out-time">Check-out Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="guest-room-address">Guest Room Address</label>
<br>
<input id="guest-room-address" type="text" name="guest-room-address" value="" placeholder="1234 A St, Anytown, XY 12345" required>
<br>
<br>
<label for="reserved-by">Reserved by</label>
<br>
<select name="reserved-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="no-of-guests">No. of Guests</label>
<br>
<input type="number" name="no-of-guests" min="1" max="5" required>
<br>
<br>
<label for="hosted-by">Hosted by</label>
<br>
<select name="hosted-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="notes">Notes</label>
<br>
<textarea name="notes" rows="2" cols="40"></textarea>
<div id="reminder">
0 reminders <button type="button" name="add-reminder" class="add-reminder-btn" id="add-reminder-btn" onclick="create_reminder()">Add</button>
</div>
</div>
<div id="cancel-add-btns">
<button type="submit" name="add-reservation" id="add-reservation-btn">ADD</button>
<button type="button" name="cancel-reservation" id="cancel-reservation-btn"> <a href="SMTWTFS Control Page 1.html">Cancel</a></button>
</div>
</form>
</body>
</html>
我已将此函数放在 reminder_status 的 onChange 属性中（第 17 行）。我也试过 onClick，但它产生了相同的结果。我也尝试过在 list_reminder() 函数中使用此代码：document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text; 但无济于事。我不确定我还能做什么。我很感激我能得到的任何帮助。
正如 bloodyKnuckles 告诉你的；加载文档时，您尝试获取的元素不在 DOM 中，这就是您无法访问它的原因。
我不知道这是否是解决您问题的优雅方法，但至少您会明白问题出在哪里。你可以做的是让 select 将它的值保存在一个全局变量中，我对你的代码做了一些评论。
var br = document.createElement("br");
var option="";/*---added----*/
function create_reminder() {
let form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "");
form.setAttribute("id", "reminder_form");
// When
let reminder_status_label = document.createElement("label");
reminder_status_label.setAttribute("for", "reminder_status");
reminder_status_label.innerHTML = "When";
let reminder_status = document.createElement("select");
reminder_status.setAttribute("name", "reminder_status");
reminder_status.setAttribute("id", "reminder-status-sel");
//reminder_status.setAttribute("onChange", "setReminderWhen(this);changeInnerHTML(this);");
reminder_status.setAttribute("onChange", "setReminderWhen(this);");/*---added----*/
let reminder_status_1 = document.createElement("option");
reminder_status_1.setAttribute("value", "on-the-day");
reminder_status_1.innerHTML = "On the day";
let reminder_status_2 = document.createElement("option");
reminder_status_2.setAttribute("value", "before");
reminder_status_2.innerHTML = "Before";
let reminder_status_3 = document.createElement("option");
reminder_status_3.setAttribute("value", "After");
reminder_status_3.innerHTML = "After";
// Note
let note_label = document.createElement("label");
note_label.setAttribute("for", "note");
note_label.innerHTML = "Note";
let note = document.createElement("textarea");
note.setAttribute("name", "note");
note.setAttribute("id", "reminder-note");
note.setAttribute("row", "10");
note.setAttribute("col", "60");
// Send to
let send_to_label = document.createElement("label");
send_to_label.setAttribute("for", "send-to");
send_to_label.innerHTML = "Send to";
let send_to = document.createElement("select");
send_to.setAttribute("name", "send-to");
send_to.setAttribute("onChange", "setReminderWhen(this);");
let blank = document.createElement("option");
blank.setAttribute("value", "--");
let email_1 = document.createElement("option");
email_1.setAttribute("value", "naa1234@cohousing.site");
email_1.innerHTML = "naa1234@cohousing.site";
let email_2 = document.createElement("option");
email_2.setAttribute("value", "sd4567@cohousing.site");
email_2.innerHTML = "sd4567@cohousing.site";
let email_3 = document.createElement("option");
email_3.setAttribute("value", "mk7890@cohousing.site");
email_3.innerHTML = "mk7890@cohousing.site";
let email_4 = document.createElement("option");
email_4.setAttribute("value", "jk0123@cohousing.site");
email_4.innerHTML = "jk0123@cohousing.site";
let email_5 = document.createElement("option");
email_5.setAttribute("value", "ms3456@cohousing.site");
email_5.innerHTML = "ms3456@cohousing.site";
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("id", "add-reminder-to-list-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let cancel_reminder_btn = document.createElement("button");
cancel_reminder_btn.setAttribute("type", "button");
cancel_reminder_btn.setAttribute("name", "cancel_reminder");
cancel_reminder_btn.setAttribute("id", "cancel-reminder-to-list-btn");
cancel_reminder_btn.innerHTML = "Cancel";
cancel_reminder_btn.setAttribute("onclick", "document.getElementById('reminder_form').style.visibility='hidden'");
// Form
form.appendChild(br.cloneNode());
form.appendChild(reminder_status_label);
form.appendChild(br.cloneNode());
form.appendChild(reminder_status);
reminder_status.appendChild(reminder_status_1);
reminder_status.appendChild(reminder_status_2);
reminder_status.appendChild(reminder_status_3);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(note_label);
form.appendChild(br.cloneNode());
form.appendChild(note);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(send_to_label);
form.appendChild(br.cloneNode());
form.appendChild(send_to);
send_to.appendChild(blank);
send_to.appendChild(email_1);
send_to.appendChild(email_2);
send_to.appendChild(email_3);
send_to.appendChild(email_4);
send_to.appendChild(email_5);
form.appendChild(br.cloneNode());
form.appendChild(add_reminder_btn);
form.appendChild(cancel_reminder_btn);
document.getElementById("reminder")
.appendChild(form);
}
function list_reminder() {
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("class", "add-reminder-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let reminder_table = document.createElement("table");
reminder_table.setAttribute("id", "reminder-table");
let reminder_table_head = document.createElement("thead");
reminder_table_head.setAttribute("id", "reminder-list-header");
let reminder_table_col_1 = document.createElement("th");
reminder_table_col_1.innerHTML = "Send to";
let reminder_table_col_2 = document.createElement("th");
reminder_table_col_2.innerHTML = "When";
let reminder_table_col_3 = document.createElement("th");
let reminder_table_body = document.createElement("tbody");
let reminder_table_row = document.createElement("tr");
let reminder_table_cell_1 = document.createElement("td");
reminder_table_cell_1.setAttribute("class", "reminder-list");
let reminder_table_cell_2 = document.createElement("td");
reminder_table_cell_2.setAttribute("class", "reminder-list");
reminder_table_cell_2.setAttribute("id", "reminder-when");
reminder_table_cell_2.innerHTML = option;/*---added----*/
let reminder_table_cell_3 = document.createElement("td");
reminder_table_cell_3.setAttribute("class", "reminder-list");
reminder_table_cell_1.innerHTML = "abc1234@cohousing.site";
// reminder_table_cell_2.innerHTML = "";
let edit_reminder_btn = document.createElement("button");
edit_reminder_btn.setAttribute("type", "button");
edit_reminder_btn.setAttribute("name", "edit_reminder");
edit_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
edit_reminder_btn.innerHTML = "Edit";
let delete_reminder_btn = document.createElement("button");
delete_reminder_btn.setAttribute("type", "button");
delete_reminder_btn.setAttribute("name", "delete_reminder");
delete_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
delete_reminder_btn.innerHTML = "Delete";
reminder_table.appendChild(reminder_table_head);
reminder_table_head.appendChild(reminder_table_col_1);
reminder_table_head.appendChild(reminder_table_col_2);
reminder_table_head.appendChild(reminder_table_col_3);
reminder_table.appendChild(reminder_table_body);
reminder_table_body.appendChild(reminder_table_row);
reminder_table_row.appendChild(reminder_table_cell_1);
reminder_table_row.appendChild(reminder_table_cell_2);
reminder_table_row.appendChild(reminder_table_cell_3);
reminder_table_cell_3.appendChild(edit_reminder_btn);
reminder_table_cell_3.appendChild(delete_reminder_btn);
document.getElementById("reminder")
.appendChild(add_reminder_btn);
document.getElementById("reminder")
.appendChild(reminder_table);
}
// Used to ensure that values are being read
function setReminderWhen(sel) {
//alert(sel.options[sel.selectedIndex].text);
option=sel.options[sel.selectedIndex].text;
}
/*
function changeInnerHTML(sel) {
document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text;
} */
h1 {
text-align: center;
color: black;
}
body, input, select, option, textarea {
font-size: 30px;
font-family: verdana;
color: #666666;
}
input, select, textarea {
border: 1px solid #e8e8e8;
}
input, select, option {
background: #e8e8e8;
padding: 10px 10px 10px 10px;
}
textarea {
background: #e8e8e8;
width: 100%
}
#guest-room-address {
width: 30%;
}
#reminder {
margin-top: 30px;
border: 3px #e8e8e8 solid;
padding: 10px 0px 60px 10px;
}
.add-reminder-btn {
float: right;
font-size: 30px;
border: 2px solid white;
background-color: white;
font-weight: bold;
font-family: verdana;
text-transform: uppercase;
}
#add-reservation-btn {
float: right;
font-size: 30px;
color: white;
background-color: #363636;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn {
float: right;
font-size: 30px;
color: black;
background-color: white;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
margin-right: 30px;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn a:link {
color: black;
text-decoration: none;
}
#cancel-reservation-btn a:visited {
color: black;
text-decoration: none;
}
#cancel-add-btns {
margin-top: 30px;
}
#reminder-list-header {
background: #e8e8e8;
text-transform: uppercase;
}
td.reminder-list {
margin-top: 10px;
padding: 20px 10px 10px 20px;
width: 10%;
}
.edit-delete-reminder-btns {
border: 3px solid #363636;
background: white;
font-size: 25px;
font-weight: verdana;
text-transform: uppercase;
padding: 20px;
margin: 0px 40px 0px 20px;
}
.edit-delete-reminder-btns:hover {
background: #363636;
color: white;
}
#add-reminder-to-list-btn {
border: 1px solid #363636;
background: #363636;
color: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#cancel-reminder-to-list-btn {
border: 1px solid white;
background: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#reminder-note {
width: 98%;
}
#reminder-table {
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Add Event to Main Calendar</title>
<meta name="viewport" width="device-width, initial-scale=1">
<link rel="stylesheet" href="Create Event.css">
<script type="text/javascript" src="Create Event.js"></script>
</head>
<body>
<div>
<h1>Add Reservation to Guest Room Calendar</h1>
<hr>
<form action="SMTWTFS Control Page 1.html" method="post">
<label for="check-in-date">Check-in Date</label>
<br>
<input type="date" name="check-in-date" min="2022-05-18" required>
<br>
<br>
<label for="check-in-time">Check-in Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="check-out-date">Check-out Date</label>
<br>
<input type="date" name="check-out-date" min="2022-05-18" required>
<br>
<br>
<label for="check-out-time">Check-out Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="guest-room-address">Guest Room Address</label>
<br>
<input id="guest-room-address" type="text" name="guest-room-address" value="" placeholder="1234 A St, Anytown, XY 12345" required>
<br>
<br>
<label for="reserved-by">Reserved by</label>
<br>
<select name="reserved-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="no-of-guests">No. of Guests</label>
<br>
<input type="number" name="no-of-guests" min="1" max="5" required>
<br>
<br>
<label for="hosted-by">Hosted by</label>
<br>
<select name="hosted-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="notes">Notes</label>
<br>
<textarea name="notes" rows="2" cols="40"></textarea>
<div id="reminder">
0 reminders <button type="button" name="add-reminder" class="add-reminder-btn" id="add-reminder-btn" onclick="create_reminder()">Add</button>
</div>
</div>
<div id="cancel-add-btns">
<button type="submit" name="add-reservation" id="add-reservation-btn">ADD</button>
<button type="button" name="cancel-reservation" id="cancel-reservation-btn"> <a href="SMTWTFS Control Page 1.html">Cancel</a></button>
</div>
</form>
</body>
</html>
我正在尝试使用我在 JavaScript 中创建的 HTML 元素显示 selected 选项。 select 元素具有三个选项：“当天”、“之前”和“之后”。
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at changeInnerHTML (Create Event.js:195:54)。
这是整个 JS 文件：
var br = document.createElement("br");
function create_reminder() {
let form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "");
form.setAttribute("id", "reminder_form");
// When
let reminder_status_label = document.createElement("label");
reminder_status_label.setAttribute("for", "reminder_status");
reminder_status_label.innerHTML = "When";
let reminder_status = document.createElement("select");
reminder_status.setAttribute("name", "reminder_status");
reminder_status.setAttribute("id", "reminder-status-sel");
reminder_status.setAttribute("onChange", "setReminderWhen(this);changeInnerHTML(this);");
let reminder_status_1 = document.createElement("option");
reminder_status_1.setAttribute("value", "on-the-day");
reminder_status_1.innerHTML = "On the day";
let reminder_status_2 = document.createElement("option");
reminder_status_2.setAttribute("value", "before");
reminder_status_2.innerHTML = "Before";
let reminder_status_3 = document.createElement("option");
reminder_status_3.setAttribute("value", "After");
reminder_status_3.innerHTML = "After";
// Note
let note_label = document.createElement("label");
note_label.setAttribute("for", "note");
note_label.innerHTML = "Note";
let note = document.createElement("textarea");
note.setAttribute("name", "note");
note.setAttribute("id", "reminder-note");
note.setAttribute("row", "10");
note.setAttribute("col", "60");
// Send to
let send_to_label = document.createElement("label");
send_to_label.setAttribute("for", "send-to");
send_to_label.innerHTML = "Send to";
let send_to = document.createElement("select");
send_to.setAttribute("name", "send-to");
send_to.setAttribute("onChange", "setReminderWhen(this);");
let blank = document.createElement("option");
blank.setAttribute("value", "--");
let email_1 = document.createElement("option");
email_1.setAttribute("value", "naa1234@cohousing.site");
email_1.innerHTML = "naa1234@cohousing.site";
let email_2 = document.createElement("option");
email_2.setAttribute("value", "sd4567@cohousing.site");
email_2.innerHTML = "sd4567@cohousing.site";
let email_3 = document.createElement("option");
email_3.setAttribute("value", "mk7890@cohousing.site");
email_3.innerHTML = "mk7890@cohousing.site";
let email_4 = document.createElement("option");
email_4.setAttribute("value", "jk0123@cohousing.site");
email_4.innerHTML = "jk0123@cohousing.site";
let email_5 = document.createElement("option");
email_5.setAttribute("value", "ms3456@cohousing.site");
email_5.innerHTML = "ms3456@cohousing.site";
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("id", "add-reminder-to-list-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let cancel_reminder_btn = document.createElement("button");
cancel_reminder_btn.setAttribute("type", "button");
cancel_reminder_btn.setAttribute("name", "cancel_reminder");
cancel_reminder_btn.setAttribute("id", "cancel-reminder-to-list-btn");
cancel_reminder_btn.innerHTML = "Cancel";
cancel_reminder_btn.setAttribute("onclick", "document.getElementById('reminder_form').style.visibility='hidden'");
// Form
form.appendChild(br.cloneNode());
form.appendChild(reminder_status_label);
form.appendChild(br.cloneNode());
form.appendChild(reminder_status);
reminder_status.appendChild(reminder_status_1);
reminder_status.appendChild(reminder_status_2);
reminder_status.appendChild(reminder_status_3);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(note_label);
form.appendChild(br.cloneNode());
form.appendChild(note);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(send_to_label);
form.appendChild(br.cloneNode());
form.appendChild(send_to);
send_to.appendChild(blank);
send_to.appendChild(email_1);
send_to.appendChild(email_2);
send_to.appendChild(email_3);
send_to.appendChild(email_4);
send_to.appendChild(email_5);
form.appendChild(br.cloneNode());
form.appendChild(add_reminder_btn);
form.appendChild(cancel_reminder_btn);
document.getElementById("reminder")
.appendChild(form);
}
function list_reminder() {
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("class", "add-reminder-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let reminder_table = document.createElement("table");
reminder_table.setAttribute("id", "reminder-table");
let reminder_table_head = document.createElement("thead");
reminder_table_head.setAttribute("id", "reminder-list-header");
let reminder_table_col_1 = document.createElement("th");
reminder_table_col_1.innerHTML = "Send to";
let reminder_table_col_2 = document.createElement("th");
reminder_table_col_2.innerHTML = "When";
let reminder_table_col_3 = document.createElement("th");
let reminder_table_body = document.createElement("tbody");
let reminder_table_row = document.createElement("tr");
let reminder_table_cell_1 = document.createElement("td");
reminder_table_cell_1.setAttribute("class", "reminder-list");
let reminder_table_cell_2 = document.createElement("td");
reminder_table_cell_2.setAttribute("class", "reminder-list");
reminder_table_cell_2.setAttribute("id", "reminder-when");
let reminder_table_cell_3 = document.createElement("td");
reminder_table_cell_3.setAttribute("class", "reminder-list");
reminder_table_cell_1.innerHTML = "abc1234@cohousing.site";
// reminder_table_cell_2.innerHTML = "";
let edit_reminder_btn = document.createElement("button");
edit_reminder_btn.setAttribute("type", "button");
edit_reminder_btn.setAttribute("name", "edit_reminder");
edit_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
edit_reminder_btn.innerHTML = "Edit";
let delete_reminder_btn = document.createElement("button");
delete_reminder_btn.setAttribute("type", "button");
delete_reminder_btn.setAttribute("name", "delete_reminder");
delete_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
delete_reminder_btn.innerHTML = "Delete";
reminder_table.appendChild(reminder_table_head);
reminder_table_head.appendChild(reminder_table_col_1);
reminder_table_head.appendChild(reminder_table_col_2);
reminder_table_head.appendChild(reminder_table_col_3);
reminder_table.appendChild(reminder_table_body);
reminder_table_body.appendChild(reminder_table_row);
reminder_table_row.appendChild(reminder_table_cell_1);
reminder_table_row.appendChild(reminder_table_cell_2);
reminder_table_row.appendChild(reminder_table_cell_3);
reminder_table_cell_3.appendChild(edit_reminder_btn);
reminder_table_cell_3.appendChild(delete_reminder_btn);
document.getElementById("reminder")
.appendChild(add_reminder_btn);
document.getElementById("reminder")
.appendChild(reminder_table);
}
// Used to ensure that values are being read
function setReminderWhen(sel) {
alert(sel.options[sel.selectedIndex].text);
}
function changeInnerHTML(sel) {
document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text;
}
这里是 HTML 和 CSS:
h1 {
text-align: center;
color: black;
}
body, input, select, option, textarea {
font-size: 30px;
font-family: verdana;
color: #666666;
}
input, select, textarea {
border: 1px solid #e8e8e8;
}
input, select, option {
background: #e8e8e8;
padding: 10px 10px 10px 10px;
}
textarea {
background: #e8e8e8;
width: 100%
}
#guest-room-address {
width: 30%;
}
#reminder {
margin-top: 30px;
border: 3px #e8e8e8 solid;
padding: 10px 0px 60px 10px;
}
.add-reminder-btn {
float: right;
font-size: 30px;
border: 2px solid white;
background-color: white;
font-weight: bold;
font-family: verdana;
text-transform: uppercase;
}
#add-reservation-btn {
float: right;
font-size: 30px;
color: white;
background-color: #363636;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn {
float: right;
font-size: 30px;
color: black;
background-color: white;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
margin-right: 30px;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn a:link {
color: black;
text-decoration: none;
}
#cancel-reservation-btn a:visited {
color: black;
text-decoration: none;
}
#cancel-add-btns {
margin-top: 30px;
}
#reminder-list-header {
background: #e8e8e8;
text-transform: uppercase;
}
td.reminder-list {
margin-top: 10px;
padding: 20px 10px 10px 20px;
width: 10%;
}
.edit-delete-reminder-btns {
border: 3px solid #363636;
background: white;
font-size: 25px;
font-weight: verdana;
text-transform: uppercase;
padding: 20px;
margin: 0px 40px 0px 20px;
}
.edit-delete-reminder-btns:hover {
background: #363636;
color: white;
}
#add-reminder-to-list-btn {
border: 1px solid #363636;
background: #363636;
color: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#cancel-reminder-to-list-btn {
border: 1px solid white;
background: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#reminder-note {
width: 98%;
}
#reminder-table {
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Add Event to Main Calendar</title>
<meta name="viewport" width="device-width, initial-scale=1">
<link rel="stylesheet" href="Create Event.css">
<script type="text/javascript" src="Create Event.js"></script>
</head>
<body>
<div>
<h1>Add Reservation to Guest Room Calendar</h1>
<hr>
<form action="SMTWTFS Control Page 1.html" method="post">
<label for="check-in-date">Check-in Date</label>
<br>
<input type="date" name="check-in-date" min="2022-05-18" required>
<br>
<br>
<label for="check-in-time">Check-in Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="check-out-date">Check-out Date</label>
<br>
<input type="date" name="check-out-date" min="2022-05-18" required>
<br>
<br>
<label for="check-out-time">Check-out Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="guest-room-address">Guest Room Address</label>
<br>
<input id="guest-room-address" type="text" name="guest-room-address" value="" placeholder="1234 A St, Anytown, XY 12345" required>
<br>
<br>
<label for="reserved-by">Reserved by</label>
<br>
<select name="reserved-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="no-of-guests">No. of Guests</label>
<br>
<input type="number" name="no-of-guests" min="1" max="5" required>
<br>
<br>
<label for="hosted-by">Hosted by</label>
<br>
<select name="hosted-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="notes">Notes</label>
<br>
<textarea name="notes" rows="2" cols="40"></textarea>
<div id="reminder">
0 reminders <button type="button" name="add-reminder" class="add-reminder-btn" id="add-reminder-btn" onclick="create_reminder()">Add</button>
</div>
</div>
<div id="cancel-add-btns">
<button type="submit" name="add-reservation" id="add-reservation-btn">ADD</button>
<button type="button" name="cancel-reservation" id="cancel-reservation-btn"> <a href="SMTWTFS Control Page 1.html">Cancel</a></button>
</div>
</form>
</body>
</html>
我已将此函数放在 reminder_status 的 onChange 属性中（第 17 行）。我也试过 onClick，但它产生了相同的结果。我也尝试过在 list_reminder() 函数中使用此代码：document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text; 但无济于事。我不确定我还能做什么。我很感激我能得到的任何帮助。
正如 bloodyKnuckles 告诉你的；加载文档时，您尝试获取的元素不在 DOM 中，这就是您无法访问它的原因。
我不知道这是否是解决您问题的优雅方法，但至少您会明白问题出在哪里。你可以做的是让 select 将它的值保存在一个全局变量中，我对你的代码做了一些评论。
var br = document.createElement("br");
var option="";/*---added----*/
function create_reminder() {
let form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "");
form.setAttribute("id", "reminder_form");
// When
let reminder_status_label = document.createElement("label");
reminder_status_label.setAttribute("for", "reminder_status");
reminder_status_label.innerHTML = "When";
let reminder_status = document.createElement("select");
reminder_status.setAttribute("name", "reminder_status");
reminder_status.setAttribute("id", "reminder-status-sel");
//reminder_status.setAttribute("onChange", "setReminderWhen(this);changeInnerHTML(this);");
reminder_status.setAttribute("onChange", "setReminderWhen(this);");/*---added----*/
let reminder_status_1 = document.createElement("option");
reminder_status_1.setAttribute("value", "on-the-day");
reminder_status_1.innerHTML = "On the day";
let reminder_status_2 = document.createElement("option");
reminder_status_2.setAttribute("value", "before");
reminder_status_2.innerHTML = "Before";
let reminder_status_3 = document.createElement("option");
reminder_status_3.setAttribute("value", "After");
reminder_status_3.innerHTML = "After";
// Note
let note_label = document.createElement("label");
note_label.setAttribute("for", "note");
note_label.innerHTML = "Note";
let note = document.createElement("textarea");
note.setAttribute("name", "note");
note.setAttribute("id", "reminder-note");
note.setAttribute("row", "10");
note.setAttribute("col", "60");
// Send to
let send_to_label = document.createElement("label");
send_to_label.setAttribute("for", "send-to");
send_to_label.innerHTML = "Send to";
let send_to = document.createElement("select");
send_to.setAttribute("name", "send-to");
send_to.setAttribute("onChange", "setReminderWhen(this);");
let blank = document.createElement("option");
blank.setAttribute("value", "--");
let email_1 = document.createElement("option");
email_1.setAttribute("value", "naa1234@cohousing.site");
email_1.innerHTML = "naa1234@cohousing.site";
let email_2 = document.createElement("option");
email_2.setAttribute("value", "sd4567@cohousing.site");
email_2.innerHTML = "sd4567@cohousing.site";
let email_3 = document.createElement("option");
email_3.setAttribute("value", "mk7890@cohousing.site");
email_3.innerHTML = "mk7890@cohousing.site";
let email_4 = document.createElement("option");
email_4.setAttribute("value", "jk0123@cohousing.site");
email_4.innerHTML = "jk0123@cohousing.site";
let email_5 = document.createElement("option");
email_5.setAttribute("value", "ms3456@cohousing.site");
email_5.innerHTML = "ms3456@cohousing.site";
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("id", "add-reminder-to-list-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let cancel_reminder_btn = document.createElement("button");
cancel_reminder_btn.setAttribute("type", "button");
cancel_reminder_btn.setAttribute("name", "cancel_reminder");
cancel_reminder_btn.setAttribute("id", "cancel-reminder-to-list-btn");
cancel_reminder_btn.innerHTML = "Cancel";
cancel_reminder_btn.setAttribute("onclick", "document.getElementById('reminder_form').style.visibility='hidden'");
// Form
form.appendChild(br.cloneNode());
form.appendChild(reminder_status_label);
form.appendChild(br.cloneNode());
form.appendChild(reminder_status);
reminder_status.appendChild(reminder_status_1);
reminder_status.appendChild(reminder_status_2);
reminder_status.appendChild(reminder_status_3);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(note_label);
form.appendChild(br.cloneNode());
form.appendChild(note);
form.appendChild(br.cloneNode());
form.appendChild(br.cloneNode());
form.appendChild(send_to_label);
form.appendChild(br.cloneNode());
form.appendChild(send_to);
send_to.appendChild(blank);
send_to.appendChild(email_1);
send_to.appendChild(email_2);
send_to.appendChild(email_3);
send_to.appendChild(email_4);
send_to.appendChild(email_5);
form.appendChild(br.cloneNode());
form.appendChild(add_reminder_btn);
form.appendChild(cancel_reminder_btn);
document.getElementById("reminder")
.appendChild(form);
}
function list_reminder() {
let add_reminder_btn = document.createElement("button");
add_reminder_btn.setAttribute("type", "button");
add_reminder_btn.setAttribute("name", "add_reminder");
add_reminder_btn.setAttribute("class", "add-reminder-btn");
add_reminder_btn.innerHTML = "Add";
add_reminder_btn.setAttribute("onclick", "document.getElementById('reminder').innerHTML='1 reminder';list_reminder();");
let reminder_table = document.createElement("table");
reminder_table.setAttribute("id", "reminder-table");
let reminder_table_head = document.createElement("thead");
reminder_table_head.setAttribute("id", "reminder-list-header");
let reminder_table_col_1 = document.createElement("th");
reminder_table_col_1.innerHTML = "Send to";
let reminder_table_col_2 = document.createElement("th");
reminder_table_col_2.innerHTML = "When";
let reminder_table_col_3 = document.createElement("th");
let reminder_table_body = document.createElement("tbody");
let reminder_table_row = document.createElement("tr");
let reminder_table_cell_1 = document.createElement("td");
reminder_table_cell_1.setAttribute("class", "reminder-list");
let reminder_table_cell_2 = document.createElement("td");
reminder_table_cell_2.setAttribute("class", "reminder-list");
reminder_table_cell_2.setAttribute("id", "reminder-when");
reminder_table_cell_2.innerHTML = option;/*---added----*/
let reminder_table_cell_3 = document.createElement("td");
reminder_table_cell_3.setAttribute("class", "reminder-list");
reminder_table_cell_1.innerHTML = "abc1234@cohousing.site";
// reminder_table_cell_2.innerHTML = "";
let edit_reminder_btn = document.createElement("button");
edit_reminder_btn.setAttribute("type", "button");
edit_reminder_btn.setAttribute("name", "edit_reminder");
edit_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
edit_reminder_btn.innerHTML = "Edit";
let delete_reminder_btn = document.createElement("button");
delete_reminder_btn.setAttribute("type", "button");
delete_reminder_btn.setAttribute("name", "delete_reminder");
delete_reminder_btn.setAttribute("class", "edit-delete-reminder-btns");
delete_reminder_btn.innerHTML = "Delete";
reminder_table.appendChild(reminder_table_head);
reminder_table_head.appendChild(reminder_table_col_1);
reminder_table_head.appendChild(reminder_table_col_2);
reminder_table_head.appendChild(reminder_table_col_3);
reminder_table.appendChild(reminder_table_body);
reminder_table_body.appendChild(reminder_table_row);
reminder_table_row.appendChild(reminder_table_cell_1);
reminder_table_row.appendChild(reminder_table_cell_2);
reminder_table_row.appendChild(reminder_table_cell_3);
reminder_table_cell_3.appendChild(edit_reminder_btn);
reminder_table_cell_3.appendChild(delete_reminder_btn);
document.getElementById("reminder")
.appendChild(add_reminder_btn);
document.getElementById("reminder")
.appendChild(reminder_table);
}
// Used to ensure that values are being read
function setReminderWhen(sel) {
//alert(sel.options[sel.selectedIndex].text);
option=sel.options[sel.selectedIndex].text;
}
/*
function changeInnerHTML(sel) {
document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text;
} */
h1 {
text-align: center;
color: black;
}
body, input, select, option, textarea {
font-size: 30px;
font-family: verdana;
color: #666666;
}
input, select, textarea {
border: 1px solid #e8e8e8;
}
input, select, option {
background: #e8e8e8;
padding: 10px 10px 10px 10px;
}
textarea {
background: #e8e8e8;
width: 100%
}
#guest-room-address {
width: 30%;
}
#reminder {
margin-top: 30px;
border: 3px #e8e8e8 solid;
padding: 10px 0px 60px 10px;
}
.add-reminder-btn {
float: right;
font-size: 30px;
border: 2px solid white;
background-color: white;
font-weight: bold;
font-family: verdana;
text-transform: uppercase;
}
#add-reservation-btn {
float: right;
font-size: 30px;
color: white;
background-color: #363636;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn {
float: right;
font-size: 30px;
color: black;
background-color: white;
border: 15px solid white;
font-weight: bold;
font-family: verdana;
margin-right: 30px;
padding: 20px;
text-transform: uppercase;
}
#cancel-reservation-btn a:link {
color: black;
text-decoration: none;
}
#cancel-reservation-btn a:visited {
color: black;
text-decoration: none;
}
#cancel-add-btns {
margin-top: 30px;
}
#reminder-list-header {
background: #e8e8e8;
text-transform: uppercase;
}
td.reminder-list {
margin-top: 10px;
padding: 20px 10px 10px 20px;
width: 10%;
}
.edit-delete-reminder-btns {
border: 3px solid #363636;
background: white;
font-size: 25px;
font-weight: verdana;
text-transform: uppercase;
padding: 20px;
margin: 0px 40px 0px 20px;
}
.edit-delete-reminder-btns:hover {
background: #363636;
color: white;
}
#add-reminder-to-list-btn {
border: 1px solid #363636;
background: #363636;
color: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#cancel-reminder-to-list-btn {
border: 1px solid white;
background: white;
font-size: 30px;
font-weight: verdana;
text-transform: uppercase;
padding: 5px;
font-weight: bold;
margin: 0px 40px 0px 0px;
float: right;
}
#reminder-note {
width: 98%;
}
#reminder-table {
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Add Event to Main Calendar</title>
<meta name="viewport" width="device-width, initial-scale=1">
<link rel="stylesheet" href="Create Event.css">
<script type="text/javascript" src="Create Event.js"></script>
</head>
<body>
<div>
<h1>Add Reservation to Guest Room Calendar</h1>
<hr>
<form action="SMTWTFS Control Page 1.html" method="post">
<label for="check-in-date">Check-in Date</label>
<br>
<input type="date" name="check-in-date" min="2022-05-18" required>
<br>
<br>
<label for="check-in-time">Check-in Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="check-out-date">Check-out Date</label>
<br>
<input type="date" name="check-out-date" min="2022-05-18" required>
<br>
<br>
<label for="check-out-time">Check-out Time</label>
<br>
<select name="hour" required>
<option value="--"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="minute" required>
<option value="--"></option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<select name="am-pm" required>
<option value="--"></option>
<option value="am">AM</option>
<option value="pm">PM</option>
</select>
<br>
<br>
<label for="guest-room-address">Guest Room Address</label>
<br>
<input id="guest-room-address" type="text" name="guest-room-address" value="" placeholder="1234 A St, Anytown, XY 12345" required>
<br>
<br>
<label for="reserved-by">Reserved by</label>
<br>
<select name="reserved-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="no-of-guests">No. of Guests</label>
<br>
<input type="number" name="no-of-guests" min="1" max="5" required>
<br>
<br>
<label for="hosted-by">Hosted by</label>
<br>
<select name="hosted-by" required>
<option value="nivaldo-acevedo">Nivaldo Acevedo</option>
<option value="sean-davey">Sean Davey</option>
<option value="margo-ketchum">Margo Ketchum</option>
<option value="jeff-kosky">Jeff Kosky</option>
<option value="mary-selman">Mary Selman</option>
</select>
<br>
<br>
<label for="notes">Notes</label>
<br>
<textarea name="notes" rows="2" cols="40"></textarea>
<div id="reminder">
0 reminders <button type="button" name="add-reminder" class="add-reminder-btn" id="add-reminder-btn" onclick="create_reminder()">Add</button>
</div>
</div>
<div id="cancel-add-btns">
<button type="submit" name="add-reservation" id="add-reservation-btn">ADD</button>
<button type="button" name="cancel-reservation" id="cancel-reservation-btn"> <a href="SMTWTFS Control Page 1.html">Cancel</a></button>
</div>
</form>
</body>
</html>