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);
});
});
I’m trying to find a way to reduce the image size by 5% every second I enter the mouse in the div.