CODEWITHSUNDEEP
javascripthtmlcss
user2372160
user2372160

Reputation: 95

onmouseenter / onmouseleave In a JavaScript Library

I want to build a JS library, so I am not using any jQuery. This is Pure JavaScript.

I created a div after mouse entered the specific element then display some info inside the div just created and after mouse leave, the info will disappear.

The mouse enter part worked fine, it showed with correct text and css style, but when moving mouse out, it only run the function first time. the created div will stay there ignoring the mouseleave function after first try.

Here is the JS code

        document.getElementById(id).addEventListener("mouseenter", function(){
            var elemDiv = document.createElement('div');
            elemDiv.id ="demo";
            document.body.appendChild(elemDiv);
            elemDiv.innerHTML = "something";
        }, false);


        document.getElementById(id).addEventListener("mouseleave", function(){

            document.getElementById("demo").innerHTML="";

        }, false);

I have tried the other method before, it gives same result

        document.getElementById(id).onmouseenter = function(){...}
        document.getElementById(id).onmouseleave = function(){...}

Upvotes: 1

Views: 1087

Answers (4)

David Hughes
David Hughes

Reputation: 378

You are creating multiple elements with the same ID and then querying with document.getElementById. This has unpredictable browser results (typically the first is returned) - you need to ensure that for each ID in your DOM, only one ID is present.

With that in mind, your mouseenter function is actually broken as it is creating extra copies of the same div when it needs to determine if one already exists.

document.getElementById(id).addEventListener("mouseenter", function(){
// Find the 'demo' div
var elemDiv = document.getElementById('demo');
// If it doesn't exist, create a div, give it the unique ID 'demo' and add it to the DOM'
if (!elemDiv) {
    elemDiv = document.createElement('div');
    elemDiv.id = 'demo';
    document.body.appendChild(elemDiv);
}
// Whether it was already on the DOM or had to be created, the text is reset.
elemDiv.innerHTML = "something";

}, false);

See my JSFiddle for a complete example: http://jsfiddle.net/ckned3mx/6/

Upvotes: 1

Rami.Q
Rami.Q

Reputation: 2476

here is a Demo:

http://jsfiddle.net/hxzgpdoz/

i made some changes in your mouseenter event function:

            var elemDiv = document.getElementById("demo");
            if( elemDiv ){
                elemDiv.innerHTML = "something";
            }else{
                elemDiv = document.createElement('div');
                elemDiv.id ="demo";
                document.body.appendChild(elemDiv);
                elemDiv.innerHTML = "something";
            }

Upvotes: 0

CodingWithSpike
CodingWithSpike

Reputation: 43708

On every mouseenter event you are making a new element with the same id="demo" which is invalid HTML (ID should be unique).

Then on mouseleave the .getElementById() function will return the first element found with that ID, which is the one created by the first mouseenter.

This means you end up with multiple demo elements that don't get cleaned up.

You should either re-use the same element (don't create it if it already exists) or remove the element on mouseleave.

Upvotes: 0

mahe
mahe

Reputation: 547

On every "mouseenter" you create a new element but you never delete it. On "mouseleave" you only delete the content of the first one, the second (third, ...) is still there and keeps its content.

You should probably create the element outside the event handlers and only change "innerHTML". Or you remove it on "mouseLeave" from the DOM.

Upvotes: 1

Related Questions