How to display the selected option of a <select> in HTML using JavaScript?

Issue

I’m trying to display the selected option from a element using HTML I created in JavaScript. The select element has three options: "On the day", "Before", and "After".
Adding Reminder
What should happen next is that after clicking the Add button on the bottom-right, the selected option (e.g., "Before") should appear in the "When" column of the reminder list.
"When" column shouldn't be blank
In the JavaScript file, I have a function called changeInnerHTML(sel) that should change the innerHTML of that column to that selected option. However, each time I click on one of the options, this error appears in the browser console: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at changeInnerHTML (Create Event.js:195:54).
Here is the entire JS file:

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;
}

And here is the HTML and 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>

I’ve placed this function inside of the onChange attribute of reminder_status (line 17). I have also tried onClick, but it generated the same result. I have also tried to using this code: document.getElementById('reminder-when').innerHTML = sel.options[sel.selectedIndex].text; within the list_reminder() function but to no avail. I’m not sure what else I can do. I appreciate any help I can get.

Solution

As bloodyKnuckles told you; the element you’re trying to get isn’t present in the DOM when the domument is loaded that’s why you cannot get access to it.

I don’t know if this is an elegant way to solve your issue but at least you’ll understand where the problem is. What you can do is make the select save its value in a global variable, I made some comments to your code.

      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>

Answered By – user2495207

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.