Question 315718 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – mouse enters, decrease the size of the image by 5% each second

I put an image in a div. When I move the mouse into the div, the image should decrease by 5% every second. I’ve done this script but nothing happens.

document.addEventListener("DOMContentLoaded", (event) => {
  const element = document.getElementsByTagName("footer")[0];
  const div = element.getElementsByTagName("div")[0];
  var urlImg = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";

  var imagejavascript = document.createElement("img");
  imagejavascript.src = urlImg;
  imagejavascript.style.width = "100%";
  imagejavascript.style.height = "100%";
  div.appendChild(imagejavascript);

  const img = div.getElementsByTagName("img")[0];
  var isOnDiv = false;
  var currentHeight = 100;

  div.addEventListener("mouseenter", function() {
    if (isOnDiv) return;
    isOnDiv = true;

    var intervalId = setInterval(function() {
      currentHeight -= 5;
      img.style.height = currentHeight + "%";

      if (currentHeight <= 0) {
        clearInterval(intervalId);
        setTimeout(function() {
          isOnDiv = false;
          currentHeight = 100;
          img.style.height = "100%";
        }, 1000);
      }
    }, 1000);
  });

  div.addEventListener("click", function() {
    div.removeChild(img);
  });
});
<footer>
  <div></div>
</footer>

I’m trying to find a way to reduce the image size by 5% every second I enter the mouse in the div.

Tags:

3

Answers


  1. 0

    There’s a few issues here:

    • isOnDiv is always false. The condition in your mouseenter handler immediately checks for a true value, which is never found, so returns before any logic runs.
    • You’re setting both height and width of the img to 100%. A change to a single one of them will have no effect. You need to set one of the values and have the image sale dynamically as you then scale it down.
    • Don’t use a variable to maintain hover state. Use separate mouseenter and mouseleave event handlers to start and end the interval, respetively.

    Here’s a working example with the above changes made:

    document.addEventListener("DOMContentLoaded", (event) => {
  const element = document.querySelector("footer");
  const div = element.querySelector("div");
  
  const img = document.createElement("img");
  img.src = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";
  img.style.width = "100%";
  div.appendChild(img);

  let currentWidth = 100;
  let intervalId;
  
  const setImgSize = value => img.style.width = value + "%";

  div.addEventListener("mouseenter", () => {
    intervalId = setInterval(function() {
      currentWidth -= 5;
      setImgSize(currentWidth);
      
      if (currentWidth <= 0) {
        clearInterval(intervalId);
      }
    }, 1000);
  });
  
  div.addEventListener('mouseleave', () => {
    clearInterval(intervalId);
    currentWidth = 100;
    setImgSize(currentWidth);
  }); 

  div.addEventListener("click", function() {
    clearInterval(intervalId);
    div.removeChild(img);
  });
});
    <footer>
  <div></div>
</footer>
    Login or Signup to reply.
  2. 0

    Setting height by percentage only works when the parent element has a fixed height. In your case, there is no styling on the parent div, so the width and height styling of your image does not work.

    One way to fix is to first render the image in your div, and then set the height and width of your div to its current calculated dimensions. You can put the following lines of code after inserting the image to the div:

    // After div.appendChild(imagejavascript);

div.style.height = `${div.clientHeight}px`;
div.style.width = `${div.clientWidth}px`;
    Login or Signup to reply.
  3. 0

    Your code was almost correct. Here is another way by not changing much your code. Your attempt to use the flag isOnDiv is not correct you should use on mouseleave event.

    document.addEventListener("DOMContentLoaded", (event) => {
    const element = document.getElementsByTagName("footer")[0];
    const div = element.getElementsByTagName("div")[0];
    var urlImg = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";
    let intervalId
    var imagejavascript = document.createElement("img");
    imagejavascript.src = urlImg;
    imagejavascript.style.width = "100%";
    div.appendChild(imagejavascript);
  
    const img = div.getElementsByTagName("img")[0];
    let currentHeight = 100;
  
    div.addEventListener("mouseenter", () =>{
        intervalId = setInterval(function() {
        currentHeight -= 5;
        img.style.width = currentHeight+"%";
        console.log ({currentHeight})
        if (currentHeight <= 0) {
          clearInterval(intervalId);
          setTimeout(function() {
            currentHeight = 100;
            img.style.height = "100%";
          }, 1000);
        }
      }, 1000);
    });

    div.addEventListener("mouseleave", ()=>{
        clearInterval(intervalId)
        img.style.width = "100%";
        currentHeight = 100;
    })
  
    div.addEventListener("click", function() {
      div.removeChild(img);
    });
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search