Javascript logic/behaviour error

Question

I want to add a overlay on the images of a website when you hover them. I implemented this here and it's working fine http://jsfiddle.net/stujLbjh/

This is the js code:

var divs = document.querySelectorAll('.image-thumb');

for (var i = 0; i < divs.length; i++) 
{
    var overlay = document.createElement('a')
    overlay.className = 'icon-overlay';
    overlay.href = '#';

    divs[i].appendChild(overlay);

    divs[i].onmouseover = function () {
        this.querySelector('.icon-overlay').style.display = 'block';}
    divs[i].onmouseout = function () {
        this.querySelector('.icon-overlay').style.display = 'none';}
    overlay.onclick = function()  {
        alert("clicked");}
}

Further on, i wanted to get rid of those div declarations in html that are including the imgs and add them dynamically straight from javascript, in order to have the same result as in the first jsfiddle, but the behaviour is weird and i miss something. You can see that here: http://jsfiddle.net/uwrae91p/1/

Any hints?

Zack.

If it in the first example, at hover the icon appears for every image, in the second example when i try to dynamically add the divs, if i hover the third image, the icon appears on the second and if i hover over the first image nothing happens. I've added a border for the .image-thumb class and only the second and third picture have it, and the picture is overlapping a empty div. — Zack Kaytranada
– Zack Kaytranada, Commented Aug 14, 2014 at 12:47
Check your browser console: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent. — emerson.marini
– emerson.marini, Commented Aug 14, 2014 at 12:56
And also: Uncaught TypeError: Cannot read property 'style' of null — emerson.marini
– emerson.marini, Commented Aug 14, 2014 at 12:56
And your code is trying to place all the images within a div. — emerson.marini
– emerson.marini, Commented Aug 14, 2014 at 13:01

emerson.marini · Accepted Answer · 2014-08-14 13:32:32Z

1

The problem is that you're using getElementsByTagName() when trying to retrieve the images. This method is a Live NodeList, so any changes to the DOM will reflect immediately.

Like in your first code attempt, you could just use querySelectorAll().

var imgs = document.querySelectorAll('img');

for (var i = 0; i < imgs.length; i++) {
    var div = document.createElement('div')
    div.className = 'image-thumb';

    var overlay = document.createElement('a')
    overlay.className = 'icon-overlay';
    overlay.href = '#';

    div.appendChild(imgs[i]);
    div.appendChild(overlay);
    document.body.appendChild(div);

    div.onmouseover = function () {
        this.querySelector('.icon-overlay').style.display = 'block';
    }
    div.onmouseout = function () {
        this.querySelector('.icon-overlay').style.display = 'none';
    }
    overlay.onclick = function () {
        alert("clicked");
    }
}

Demo

document.querySelectorAll

document.getElementsByTagName

answered Aug 14, 2014 at 13:32

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Zack Kaytranada Over a year ago

I've learned a couple of things today. Thank you for your detailed answer!

Zack Kaytranada Over a year ago

do you have any idea why the formatting is changed when the js code is called? In the jsfiddle everything works as a charm, but if i create a html with 3 pictures, when the page is loaded, the pictures are displayed horizontally and after the js code is called they are displayed vertically and i can't understand why because if i inject this js code, it ruins the page image formatting.

emerson.marini Over a year ago

Some images are contained into links, and some are not. Do you want to keep these links?

emerson.marini Over a year ago

The problem is, these images contained into links, will have a link within another link, because you want to add the icon overlay. It would be something like: original link -> injected div -> img -> injected link.

emerson.marini Over a year ago

Right... To keep the images inline, I've changed a few bits. Check the comments in this jsFiddle: jsfiddle.net/MelanciaUK/oz5t0p19 You'll need to adjust a bit your CSS, but that's the idea to go from.

|

xxbinxx · Accepted Answer · 2014-08-14 13:51:13Z

1

You are creating div element outside the loop. That means it is created only one time. You need it multiple times. So put it inside the for loop.
Use querySelectorAll() instead of getElementsByTagName().

That's it. All of your code is perfect -- other than these two points.

answered Aug 14, 2014 at 13:51

xxbinxx

1,55111 silver badges18 bronze badges

1 Comment

xxbinxx Over a year ago

@ZackKaytranada My pleasure...I am here to answer.

Collectives™ on Stack Overflow

Javascript logic/behaviour error

2 Answers 2

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related