Absolutely Stuck Tried Everything Javascript runs in any test console but not on my website

!SOLVED! The script works completely now because i put the tags at the very bottom inside the body tags. The idea of moving the script tags was suggested in the comments. previously, i thought script tags were to be exclusively confined to the

Here's my code in its entirety. my script runs in consoles but will not run on my website. It's not a linking issue, its not a coding issue, I even have the test function

anAlert()

to test that javascript itself is working. I am sure there is something obviously wrong I am doing but i cannot figure out what it is for the life of myself.

var malediv = document.querySelector('.male');
var femalediv = document.querySelector('.female');
var male_sources = [
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
  "https://i.imgur.com/tw2GwmW.jpg",
];
var female_sources = [
  "/images/f1.png",
  "/images/f2.png",
  "/images/f3.png",
  "/images/f4.png",
  "/images/f5.png",
  "/images/f6.png",
  "/images/f7.png",
  "/images/f8.png",
];


function displayRandMaleImage() {
  malediv.innerHTML = "";
  var malerandom_number = Math.floor(Math.random() * male_sources.length);
  var random_male_image_source = male_sources[malerandom_number];
  maleimg = document.createElement('img');
  maleimg.setAttribute('src', random_male_image_source);
  malediv.append(maleimg);
  alert('maleimagedisplayed');
}

function displayRandFemaleImage() {
  femalediv.innerHTML = "";
  var femrandom_number = Math.floor(Math.random() * female_sources.length);
  var random_female_image_source = female_sources[femrandom_number];
  femaleimg = document.createElement('img');
  femaleimg.setAttribute('src', random_female_image_source);
  femalediv.append(femaleimg);
}

function displayRandImages() {
  displayRandMaleImage();
  displayRandFemaleImage();
  alert('SKEEET');
}

function anAlert() {
  alert('SKEEEETTT')
}
window.onload = anAlert()
<!DOCTYPE html>
<html style="height:100%;width:100%;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Parasol | Luxury Designer Streetwear Fashion Clothing for Women & Men </title>
</head>

<body style="height:95%;width:99%;" onload="displayRandImages();">
  <div class="male" style="width:25%;float:left;height:100%;">
    <img src="http://i.dailymail.co.uk/i/pix/2015/01/21/24EB9E3D00000578-2920622-image-m-72_1421873925034.jpg" style="max-width:95%;padding:2.5%;padding-top:49.5%;" />
  </div>
  <div style="width:50%;position:relative;margin:0 auto;height:100%;float:left;">
    <div style="height:3.5%;width:100%;overflow:auto;font-family:courier;">
      <h4 style="margin-top:0px;margin-bottom:0px;">Hey! follow @parasolhc.Subscribe to our text notifications by... now!
      </h4>
    </div>
    <div style="height:4.5%;width:100%;font-family:courier;">
      <div style="width:25%;height:100%;background-color:#925f52;float:left;">
        <h4 style="color:#a36a5c;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          home
        </h4>
      </div>
      <div style="width:25%;height:100%;background-color:#cac7a7;float:left;">
        <h4 style="color:#d9d7bf;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          <a style="color:#d9d7bf;text-decoration:none;" href="https://i.redd.it/79q85dxbt2x01.jpg">
								content
								</a>
        </h4>
      </div>
      <div style="width:25%;height:100%;background-color:#002e5d;float:left;">
        <h4 style="color:#004080;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          shop
        </h4>
      </div>
      <div style="width:25%;height:100%;background-color:#ff9955;float:left;">
        <h4 style="color:#ffad33;overflow:auto;margin-top:0px;margin-bottom:0px;margin-left:45%;">
          about
        </h4>
      </div>

    </div>
    <div style="float:left;width:10%;height:10%;display:inline-block;margin-bottom:10%;position:absolute;">
      <h1 style="font-family:courier;float:left;clear:right;position:absolute;">
        Parasol
      </h1>
    </div>
    <div style="height:15%;position:static;padding-top:5%;margin-left:27.5%;padding-bottom:5%;">
      <h2 style="font-family:courier;text-align:center;">
        Cartridge I
      </h2>
      <p style="font-family:courier;text-align:center;">click the images below to purchase</p>
    </div>
    <div style="width:100%;height:40%;margin-top:5%;position:static;overflow:auto;">
      <div style="margin:auto;width:100%;height:30%;float:right;position:absolute;">
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #73AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"></a>
        </div>
        <div style="width:21%;margin:auto;border: 3px solid #77AD21;padding:1.525%;float:left;display:inline-block;">
          <a href="http://parasolus.com/url.com"><img src="/images/homeplaceholder.jpg" width="100%" height="100%"> </a>
        </div>
      </div>
    </div>
  </div>
  <div style="width:25%;float:left;height:100%;" class="female">
  </div>
</body>

</html>