Why does my preloader not disappear once the website is loaded?

I have been watching multiple videos on how to implement preloaders and tried to follow them but never end up with a preloader that disappears once the website is loaded.

This is one of the methods that I've tried:

* {
  padding: 0;
  margin: 0;
}

#loading {
  background:#020d1d url('images/preloader.gif') no-repeat center;
  background-size: 10%;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing preloader</title>
</head> 

<body onload="myFunction()">
  
  <div id="loading"></div>

  <div class="randomImg">
    <img src="https://source.unsplash.com/2000x2000" alt="RandomImage">
  </div>

  <script>
    var preloader = document.getElementsById('loading');
    function myFunction() {
      preloader.style.display = 'none';
    }
  </script>

</body>

Solution

it's getElementById not getElementsById (no s)