Почему не срабатывает функция? JS

Question

Делаю по этому примеру, только через флексы. Я всё это реализовал, но не могу понять одного, почему не работают команды, которые я задал. Вроде-бы оно всё должно работать, а в консоле даже ошибки не выдаёт, при чём предыдущие функции и прочее работают.

document.getElementById('closeimg').onclick = function() {
 document.getElementsByClassName('modalform')[0].style.display = 'none';
}
document.getElementById('cancelform').onclick = function() {
 document.getElementsByClassName('modalform')[0].style.display = 'none';
}
document.getElementById('butlog').onclick = function() {
 document.getElementsByClassName('modalform')[0].style.display = 'flex';
}

#butlog {
  margin: 10px auto 10px auto;
  background-color: #8B008B;
  color: white;
  border-radius: 5px;
  font-size: 16px;
  padding: 4px;
  border: none;
  outline: none;
  width: 200px;
  cursor: pointer;
}

#butlog:hover {
  background-color: #9932CC;
}

.modalform {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: auto;
}

.imgdiv {
  display: flex;
  flex-direction: row;
}

#closeimg {
  font-weight: bold;
  font-size: 27px;
  color: black;
  transition: .3s;
  right: 20px;
  height: 28px;
  cursor: pointer;
}

#closeimg:hover {
  color: red;
}

#autumn {
  width: 20%;
  border-radius: 50%;
  user-select: none;
  height: 200px;
  margin: auto;
}

.enter {
  flex-direction: column;
  flex: 1 0 auto;
  background-color: #FAF0E6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.footform {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #DCDCDC;
}

.enter, .footform {
  display: flex;
  margin: auto;
  padding: 8px;
  line-height: 1.2;
}

#passa {
  position: relative;
  text-decoration: none;
  color: #000080;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0s;
}

#passa:before {
  content: "";
  height: 2px;
  width: 0%;
  left: 50%;
  bottom: 0;
  background-color: red;
  transition: all 0.3s ease-in-out 0s;
  position: absolute;
}

#passa:after {
  content: "";
  height: 2px;
  width: 0%;
  left: 50%;
  bottom: 0;
  background-color: red;
  transition: all 0.3s ease-in-out 0s;
  position: absolute;
}

#passa:hover:before,
#passa:focus:before {
  left: 0;
  width: 50%;
}

#passa:hover:after,
#passa:focus:after {
  width: 50%;
}

#passa:hover {
  opacity: .8;
}

#cancelform {
  padding: 8px;
  color: white;
  background-color: red;
  font-size: 15px;
  cursor: pointer;
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid black;
  outline: none;
  width: 130px;
}

.enter {
  margin-top: 5px;
}

label, #username, #password, #submitform, #remember {
  margin-bottom: 4px;
}

#username, #password {
  background-color: white;
  border: 2px solid lightblue;
  border-radius: 5px;
  outline: none;
  transition: .3s;
}

#username:focus, 
#password:focus {
  border-color: purple;
  transition: .3s;
}

::-webkit-input-placeholder {font-size: 14px; letter-spacing: 1.5px}
::-moz-placeholder          {font-size: 14px; letter-spacing: 1.5px}
:-moz-placeholder           {font-size: 14px; letter-spacing: 1.5px}
:-ms-input-placeholder      {font-size: 14px; letter-spacing: 1.5px}

#submitform {
  font-size: 15px;
  border: 1px solid;
  border-radius: 8px;
  padding: 5px;
  background-color: green;
  color: white;
  outline: none;
  cursor: pointer;
}

#checkbox {
  cursor: pointer;
}

 <button id="butlog">Login</button>

 <div class="modalform">
 <form action="/action_page.php">

  <div class="imgdiv">
   <img src="Autumn.jpg" alt="It's my avatar!" id="autumn">
   <span id="closeimg">&times;</span>
  </div>

  <div class="enter">
  <label for="username"><b>Enter your name:</b></label>
  <input type="text" id="username" placeholder="Your name..." required>

  <label for="password"><b>Please, think up your password:</b></label>
  <input type="text" id="password" maxlength="10" placeholder="Your password..." required>


  <button type="submit" id="submitform">Log in</button>
  <span id="remember">
  <input type="checkbox" id="checkbox" checked> Remember me
  </div>
  </span>

  <div class="footform">
  <button id="cancelform" title="Close Modal Form">Cancel</button>
  <span id="pass">Forgot your<a href="#" id="passa"> password?</a></span>
  </div>
 </form>
 </div>
 </br>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="TEST2.js" type="text/javascript"></script>

Answer 1

document.getElementsByClassName возвращает набор html элементов. В Вашем случае - набор из одного элемента.

document.getElementsByClassName('modalform')[0].style.display = ...;

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

document.getElementById('closeimg').onclick = function() {
  document.getElementsByClassName('modalform')[0].style.display = 'none';
}
document.getElementById('cancelform').onclick = function() {
  document.getElementsByClassName('modalform')[0].style.display = 'none';
}
document.getElementById('butlog').onclick = function() {
  document.getElementsByClassName('modalform')[0].style.display = 'flex';
}
document.getElementById('butlog').addEventListener("click", function() {
  document.getElementsByClassName('modalform')[0].style.display = 'block'
});

#butlog {
  margin: 10px auto 10px auto;
  background-color: #8B008B;
  color: white;
  border-radius: 5px;
  font-size: 16px;
  padding: 4px;
  border: none;
  outline: none;
  width: 200px;
  cursor: pointer;
}

#butlog:hover {
  background-color: #9932CC;
}

.modalform {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: auto;
}

.imgdiv {
  display: flex;
  flex-direction: row;
}

#closeimg {
  font-weight: bold;
  font-size: 27px;
  color: black;
  transition: .3s;
  right: 20px;
  height: 28px;
  cursor: pointer;
}

#closeimg:hover {
  color: red;
}

#autumn {
  width: 20%;
  border-radius: 50%;
  user-select: none;
  height: 200px;
  margin: auto;
}

.enter {
  flex-direction: column;
  flex: 1 0 auto;
  background-color: #FAF0E6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.footform {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #DCDCDC;
}

.enter,
.footform {
  display: flex;
  margin: auto;
  padding: 8px;
  line-height: 1.2;
}

#passa {
  position: relative;
  text-decoration: none;
  color: #000080;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0s;
}

#passa:before {
  content: "";
  height: 2px;
  width: 0%;
  left: 50%;
  bottom: 0;
  background-color: red;
  transition: all 0.3s ease-in-out 0s;
  position: absolute;
}

#passa:after {
  content: "";
  height: 2px;
  width: 0%;
  left: 50%;
  bottom: 0;
  background-color: red;
  transition: all 0.3s ease-in-out 0s;
  position: absolute;
}

#passa:hover:before,
#passa:focus:before {
  left: 0;
  width: 50%;
}

#passa:hover:after,
#passa:focus:after {
  width: 50%;
}

#passa:hover {
  opacity: .8;
}

#cancelform {
  padding: 8px;
  color: white;
  background-color: red;
  font-size: 15px;
  cursor: pointer;
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid black;
  outline: none;
  width: 130px;
}

.enter {
  margin-top: 5px;
}

label,
#username,
#password,
#submitform,
#remember {
  margin-bottom: 4px;
}

#username,
#password {
  background-color: white;
  border: 2px solid lightblue;
  border-radius: 5px;
  outline: none;
  transition: .3s;
}

#username:focus,
#password:focus {
  border-color: purple;
  transition: .3s;
}

::-webkit-input-placeholder {
  font-size: 14px;
  letter-spacing: 1.5px
}

::-moz-placeholder {
  font-size: 14px;
  letter-spacing: 1.5px
}

:-moz-placeholder {
  font-size: 14px;
  letter-spacing: 1.5px
}

:-ms-input-placeholder {
  font-size: 14px;
  letter-spacing: 1.5px
}

#submitform {
  font-size: 15px;
  border: 1px solid;
  border-radius: 8px;
  padding: 5px;
  background-color: green;
  color: white;
  outline: none;
  cursor: pointer;
}

#checkbox {
  cursor: pointer;
}

<button id="butlog">Login</button>

<div class="modalform">
  <form action="/action_page.php">

    <div class="imgdiv">
      <img src="Autumn.jpg" alt="It's my avatar!" id="autumn">
      <span id="closeimg">&times;</span>
    </div>

    <div class="enter">
      <label for="username"><b>Enter your name:</b></label>
      <input type="text" id="username" placeholder="Your name..." required>

      <label for="password"><b>Please, think up your password:</b></label>
      <input type="text" id="password" maxlength="10" placeholder="Your password..." required>


      <button type="submit" id="submitform">Log in</button>
      <span id="remember">
  <input type="checkbox" id="checkbox" checked> Remember me
  </div>
  </span>

      <div class="footform">
        <button id="cancelform" title="Close Modal Form">Cancel</button>
        <span id="pass">Forgot your<a href="#" id="passa"> password?</a></span>
      </div>
  </form>
  </div>
  </br>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="TEST2.js" type="text/javascript"></script>