CODEWITHSUNDEEP
javascripthtmlonloadonmouseover
Tesked
Tesked

Reputation: 3

How do i make a JavaScript event run on page load?

Im new to JS and replicated this effect according to a showcase of it that i saw which is supposed to "glitch" the text on hover and then make it go back to the original text. This works by using .onmouseover and running the event after that. I tried changing this to .onload but then it wont run the animation/effect and i can't figure out why it does not work.

Here is my code:

const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789"


document.getElementById("load-text").onmouseover = event => {
    let iterations = 0

   const interval = setInterval(() => {
    event.target.innerText = event.target.innerText.split("")
    .map((letter, index) => {
        if (index < iterations) {
            return event.target.dataset.value[index];
        }
        
        return symbols[Math.floor(Math.random() * 35)]
   })
    .join("");

    if(iterations >= event.target.dataset.value.length) clearInterval(interval);

    iterations += 1 / 6;
}, 30);
}
body {   
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    display: flex;
    background-color: #121012;
    justify-content: center;
}
.loader{
    margin-top: 40vh;
    color: #EEEEEE;
    font-family: monospace;
    font-size: 30pt;

}
<div class="loader">
    <p id="load-text" data-value="LOADER"> LOADER </p>
</div>
    <script src="project.js"></script>
(code pen: https://codepen.io/Tesked/pen/ExedNQX)

I have tried using possible solutions in this thread How do I call a JavaScript function on page load? but none of them seem to work, the event still doesn't fire unless i add the .onmouseover Where it works as it is intended to.

The idea here is to use this as a "loading screen" of sort that will do the glitch effect and then fade in the rest of the page, though this is a problem for another time.

Upvotes: 0

Views: 565

Answers (3)

Sanu Khan
Sanu Khan

Reputation: 100

I made a small change on your JS code

window.onload = function() {
  const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
  const target = document.getElementById("load-text");
  let iterations = 0;

  const interval = setInterval(() => {
    target.innerText = target.innerText.split("")
      .map((letter, index) => {
        if (index < iterations) {
          return target.dataset.value[index];
        }

        return symbols[Math.floor(Math.random() * symbols.length)];
      })
      .join("");

    if (iterations >= target.dataset.value.length) clearInterval(interval);

    iterations += 1 / 6;
  }, 30);
};

i wrapped the function inside a window.onload tested on your pen seems working could you try this and see if this is what you are expecting

Upvotes: 0

somethinghere
somethinghere

Reputation: 17340

You have to a couple more steps but the DOMContentLoaded event works for this. In order to then target it, you also need to search for the element in your DOM because event.target will be the document.

const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
// Instead of `event.target` we have to select it first, as the target will be `document`
const element = document.getElementById('load-text')

document.addEventListener('DOMContentLoaded', event => {
  let iterations = 0;
  const interval = setInterval(() => {
    element.innerText = element.innerText.split("").map((letter, index) => {
      if (index < iterations) {
        return element.dataset.value[index];
      }
      return symbols[Math.floor(Math.random() * symbols.length)]
    }).join("");
    if (iterations >= element.dataset.value.length) clearInterval(interval);
    iterations += 1 / 6;
  }, 30);
});
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  display: flex;
  background-color: #121012;
  justify-content: center;
}

.loader {
  margin-top: 40vh;
  color: #EEEEEE;
  font-family: monospace;
  font-size: 30pt;
}
<div class="loader">
  <p id="load-text" data-value="LOADER"> LOADER </p>
</div>

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

Simply trigger the event via:

loadingTextEl.dispatchEvent(new MouseEvent('mouseover'));


const loadingTextEl = document.getElementById('load-text')
const symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789"

const onMouseOver = (event) => {
  let iterations = 0
  const interval = setInterval(() => {
    event.target.innerText = event.target.innerText.split("")
      .map((letter, index) => {
        if (index < iterations) {
          return event.target.dataset.value[index];
        }
        return symbols[Math.floor(Math.random() * 35)]
      })
      .join("")

    if (iterations >= event.target.dataset.value.length) clearInterval(interval)
    iterations += 1 / 6;
  }, 30)
}

loadingTextEl.addEventListener('mouseover', onMouseOver)

loadingTextEl.dispatchEvent(new MouseEvent('mouseover')) // Trigger
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
  display: flex;
  background-color: #121012;
  justify-content: center;
}

.loader {
  margin-top: 40vh;
  color: #EEEEEE;
  font-family: monospace;
  font-size: 30pt;
}
<div class="loader">
  <p id="load-text" data-value="LOADER"> LOADER </p>
</div>
<script src="project.js"></script>

Upvotes: 0

Related Questions