JavaScript [SOLVED] Can anyone help me figure out why these specific EventListeners aren't working?

[yumedoll]

I have this:

document.documentElement.addEventListener("load", function(){
    document.getElementById("loading").style.display = "block";
    document.getElementById("okthanks").style.display = "none";
});

window.addEventListener("load", function(){
    document.getElementById("loading").style.display = "none";
    document.getElementById("okthanks").style.display = "block";
});

I've placed them in my HTML document using <script></script> tags.

I want to make a simple loading UI for a game I've made. It's supposed to hide the loading gif file after the website is fully loaded and its place will be the play button. This method has worked for the other game I've made completely fine, in which I placed it in script tags somewhere near the end of that game's document.

But the issue I'm facing is it doesn't seem to work no matter where I place it in this specific document. Excuse the spaghetti code btw, but still.

I've tried placing it directly below the style code of the opening splash screen:

  <div style="font-family: umeboshi; display: block;" align="middle" class="profile">
    <h1
      style="border: 25px transparent solid!important; border-image: url(https://i.ibb.co/sK11sRT/Untitled122-20230317200942.png) round 30%!important; font-family: umeboshi!important;"
      align="middle">ケーキ作ろう</h1>
    <p align="middle" style=" font-size: 40pt; font-family: umeboshi;">※このゲームはモバイルでやるのできますが、端末用に最適化されていません。</p>
    <p align="middle" style=" font-size: 40pt; font-family: umeboshi;">※素人が作ったゲームで、バグがあれば遠慮なく報告してください。</p>
    <p align="middle" style=" font-size: 40pt; font-family: umeboshi;">※音と音楽が入ってます。</p>
    <img style="display: none" src="loading.gif" id="loading">
    <a align="middle" style="display: block; font-family: umeboshi;" class="button" id="okthanks"
     onclick="this.parentElement.style.display = 'none';">プレイ</a>

  </div>


  <style>
    .profile {
      z-index: 2000;
      width: 1015px;
      height: 100%;
      padding: 6% 12%;
      font-size: 200%;
      background-image: url('plaid.png');
      background-repeat: repeat;
      background-position: center;
      background-size: 200px 200px;
      background-color: white;
      opacity: 1;
      transition: 0.5s;
      display: block;
      position: fixed;
      top: 0vh;
      left: 0vh;
      opacity: 1;
      transition: opacity 0.6s;
    }

    #okthanks {
      font-size: 60px;
      width: fit-content;
      border: 25px solid transparent;
      border-image: url('https://i.ibb.co/sK11sRT/Untitled122-20230317200942.png') round 30%;
      transition: 0.3s;
    }

    #okthanks:hover {
      background-color: #fcebf4;
    }

    .profile>ul {
      padding: 10px 50px;
      border: 10px #ffb3cc dotted;
      border-radius: 20px;
      font-family: umeboshi;
      background-color: white;
    }

</style>

<script>
document.documentElement.addEventListener("load", function(){
    document.getElementById("loading").style.display = "block";
    document.getElementById("okthanks").style.display = "none";
});

window.addEventListener("load", function(){
    document.getElementById("loading").style.display = "none";
    document.getElementById("okthanks").style.display = "block";
});

</script>

But it didn't work.

Then, I tried placing it within the very same <script> of the script used to "open the recipe book" in the game:

<script>
document.documentElement.addEventListener("load", function(){
    document.getElementById("loading").style.display = "block";
    document.getElementById("okthanks").style.display = "none";
});

window.addEventListener("load", function(){
    document.getElementById("loading").style.display = "none";
    document.getElementById("okthanks").style.display = "block";
});

let recipebookstate = false;

document.getElementById("bookicon").addEventListener("click", ()=>{
  if(recipebookstate == false){
    document.getElementById('recipebook').style.bottom = '1100px';
    recipebookstate = true;
  }
  else if(recipebookstate == true){
    document.getElementById('recipebook').style.bottom = '0px';
    recipebookstate = false;
  }
 })
</script>

But it didn't work either. However, the script for opening the recipe book worked just fine.

I tried to make the initial values of the play button and the loading gif the same as the function in the DOM's load EventListener,
But that did nothing but leave me just waiting for an endless looping gif to be replaced by a play button, only to realize it wasn't even taking into account whether it was loading or not in the first place.

I tried checking for issues in the console, but no huge issues, let alone actually related issues came up.

I tried deleting my cache and reloading again, even using different browsers, but still no loading animation.

Can anyone help me out?

 

[OldMan]

Before doing anything after coding, you should verify your code
The W3C Markup Validation Service
ie: "align" is not an attribute.
Please stop using inline CSS, it just confuses the problem.
Something is limiting the page height.

Without going too deep into things, you have two listeners listening to the same thing. It confuses the HTML engine.

 

[yumedoll]

Before doing anything after coding, you should verify your code
The W3C Markup Validation Service
ie: "align" is not an attribute.
Please stop using inline CSS, it just confuses the problem.
Something is limiting the page height.

Without going too deep into things, you have two listeners listening to the same thing. It confuses the HTML engine.

Yep, the page height is limited because it's all inside the div as this game is designed to be embedded through Iframes. But I got the code from here

It claims those are two separate events, and window loads once the document is loaded.

Also I don't think the use of inline is the source of the issue as the other game I've made was done with a lot of inline and had multiple js files linked to it but still had the loading screen fine.

I'll try to look into the other js files that are linked to this document and maybe I can find what's hindering it.

EDIT: Ok, I tried the markup checker and most of it is just small details that aren't really that bad for the document. But it doesn't really help with the issue I'm facing right now though.

 

[yumedoll]

Nothing in the js files linked within the html document seem to be the trouble from what I see. Not sure if there's some technical context I'm missing though.

For those wondering how the effect is supposed to happen, this is the game where the loading thing works. Heads up though, it's about dissecting a rabbit which is why the splash screen has warnings about it.

 

[yumedoll]

I'm going to try a new method. The mods are free to close this discussion or even delete it depending on whether it can be useful for others or not.

 

[OldMan]

For anyone else reading this, my comments dealt with the sloppy way the OP was coding.
Using bad attributes (<p align="middle"...) and not correcting them leads me to think the programmer doesn't care.

Wanting people to search hundreds of places because they use inline styling is also asking too much.

I don't think the problem was too complex and would have helped once he corrected the code.

 

[yumedoll]

For anyone else reading this, my comments dealt with the sloppy way the OP was coding.
Using bad attributes (<p align="middle"...) and not correcting them leads me to think the programmer doesn't care.

Wanting people to search hundreds of places because they use inline styling is also asking too much.

I don't think the problem was too complex and would have helped once he corrected the code.

No, it's okay. I understand you were trying to help. But I'm kinda strapped for time and this site is simply a personal venture. I don't really intend to take my web dev skills to another level. I want to refine my skills in a different field altogether. But thank you for offering though. No malice was intended in the first reply. I just wanted a way to fix the issue and nothing else. Good news, it works now by utilizing the onstatechange event.

 

[JosiahMaybe]

Have you noticed that display = "none" and display = "block" are reversed in each of like your listeners? One makes one this and other that and other makes one that and other this like is. Also, I use element.hidden=true for hiding but this seems like it should work with loading part set to display = "hidden" and okthanks set to display = "block". One of those listeners is run last and apparently it is with wrong display.
X E.