Question 88593 in Html Question posted in
Some basic documentation can be found here.

Fire JS on page load and on mouse over? – Html

I have the below JS that animates an H1 I have on my page. It works fine when I use onmouseover instead of onload, but I want this to fire on BOTH page load + mouse over. How can I adjust the code to account for both of these scenarios? I can’t even get it to work only on page load.

window.onload = function(){

  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  document.querySelector("h1").onload = 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 letters[Math.floor(Math.random() * 26)]
      })
      .join("");

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

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

UPDATE:
I have edited my code per the recommendations. Instead of calling event.target now, I have put my query selector inside variable: name and am using that in my function. However, I’m getting an error at the name.innerText.split("") line. Am I incorrectly referencing this element now?

window.onload = function(){

  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const name = document.querySelector("h1");
  name.addEventListener('mouseover', animate);
}

  function animate(){
    let iterations = 0;

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

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

      iterations += 1 / 3;
    }, 30);
  }
Tags:

2

Answers


  1. 0

    Instead of set it as event, invoke it as a custom function:

    window.onload = function() {
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  document.onload = customFunction();
}

function customFunction() {
    [...]
}
    Login or Signup to reply.
  2. 0

    if your read about window.onload here, they said:

    The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.

    that’s mean you don’t have to wait the h1 element to load it’s already loaded and checked while the function inside window.load is excuted, so
    you just need to add a mouseover event listener to the element, here’s an ideas:

    you can keep your code like this but replace the event:

    document.querySelector("h1").onmouseover = event =>

    or you can add event listners if you want to add a mouseenter event as example:

    const element = document.querySelector("h1");
element.addEventListener('mouseover', onEventTrigger);
element.addEventListener('mouseenter', onEventTrigger);

    and add this function:

    function onEventTrigger() {
    // your logic that was inside onload
}

    Edit after your Edit:

    you are facing this error because the name variable not scoped inside the function animate(), you can fix it by passing the name as a parameter to the function:

    name.addEventListener('mouseover', animate(name));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search