Div contents don't appear on button press in anything other than jsfiddle

Question

I have a script that opens a div where you can change the time of a timer, and it opens on a button press. This works fine in fiddle, the div opens up and the div contents appear, but other IDEs don't work (Coding Rooms, Programiz, pretty much any other online IDE)--the div never appears. The code is below. Any solutions or explanations?

Is it maybe because JSFiddle uses a different version of JS? I honestly have no idea.

Here is the JSFiddle so you can see the full code.

var setTimeMenu = document.getElementById("setTimeMenu");
var openTimeSetMenu = document.getElementById("setTimeMenuOpenButton");
var closeTimeSetMenuSpan = document.getElementsByClassName("close")[0];

openTimeSetMenu.onclick = function() {
  setTimeMenu.style.display = "block";
}

closeTimeSetMenuSpan.onclick = function() {
  setTimeMenu.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == setTimeMenu) {
    setTimeMenu.style.display = "none";
  }
}

.timeTypeText {
  font-size: 16pt;
  font-weight: bold;
  font-family: "Helvetica", sans-serif;
  display: inline;
}

.timeAmountText {
  display: inline;
  font-family: "Helvetica", sans-serif;
  font-size: 14pt;
}

.centerVertical {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


.Modal {
  display: none;
  position: fixed;
  z-index: +1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modalContents {
  font-family: "Helvetica", sans-serif;

  font-size: 14pt;

  background-color: #fefefe;
  margin: 15% auto;
  padding: 15px;
  border: 1px solid #888;
  width: 70%;
}

.close {
  color: #ffffff;
  float: right;
  font-size: 48px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #cccccc;
  text-decoration: none;
  cursor: pointer;
}

input {
  background-color: white;
  border: thin solid blue;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  transform: scale(80%);
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input::placeholder {
  overflow: visible;
}

select,
input {
  background-color: #ededed;
  border: thin solid blue;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  transform: scale(80%);
  margin: 0;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}

select.minimal:hover {
  cursor: pointer;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.ButtonStyle {
  text-align: center;
  font-family: "Helvetica", sans-serif;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  background-color: #e3e3e3;
  border: thin solid blue;
  border-radius: 4px;
  padding: 10px;
  width: max;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
}

.ButtonStyle:hover {
  background: #fff;
  box-shadow: 0px 2px 10px 5px #97B1BF;
  color: #000;
}

.ButtonStyle:after {
  content: "";
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s;
}

.ButtonStyle:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.disabled {
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}

.not-allowedCursor {
  cursor: not-allowed;
}

input {
  display: block;
  margin: 0 auto;
}

<body>
  <button id="setTimeMenuOpenButton" class="ButtonStyle">Set School Closing Time</button>
  <div id="setTimeMenu" class="Modal">
    <span class="close">&times;</span>
    <div class="modalContents">
      <p align="center" style="font-weight: bold;">Change the time and date to when your Summer vacation starts!</p><br>
      <input id="timeInputBox" pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}" size="10" maxlength="8" placeholder="Time:">
      <p align="center" style="font-size: 9pt; font-weight: bold;">You must use the format "hr:min:sec" to change the time! Time must also be in military time!</p>
      <p align="center" style="font-size: 9pt; font-weight: bold; color: grey;">e.g.: 14:06:00</p>
      <input type="submit" class="ButtonStyle" style="transform: scale(120%); font-size: 16pt; margin-left: 23px; padding-left: 45px; padding-right: 45px" required>
    </div>
  </div>
  <div id="timerDiv" align="center">
    <div class="timeTypeText">Days: </div>
    <div class="timeAmountText"><span class="days"></span></div><br>
    <div class="timeTypeText">Hours: </div>
    <div class="timeAmountText"><span class="hours"></span></div><br>
    <div class="timeTypeText">Minutes: </div>
    <div class="timeAmountText"><span class="minutes"></span></div><br>
    <div class="timeTypeText">Seconds: </div>
    <div class="timeAmountText"><span class="seconds"></span></div>
  </div>
</body>

Answer 1

If you download the JSEditor.io code you will notice the script tag is added in head so the script is not able to find the elements in body so the code is not working