CODEWITHSUNDEEP
javascriptjquery
user3281114
user3281114

Reputation: 187

Adding mouseover event to a javascript created DIV

Im currently getting data from Google places and am dynamically creating the div to display the results. I am trying to add a mouseover event to each div yet am having no luck implementing it. Ive check the html source and it seems to not add the event for any of the created DIV's.

JS:

for (var i = 0; i < relatedProperties.length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.className = "item_holder";
        div.onmouseover = PanToMarker(relatedProperties[i].formatted_address);
        document.getElementById('relatedpropertyDIV').appendChild(div);

    }

function PanToMarker(address) {
     //Grabs the address and pans to it on the map.
}

Upvotes: 3

Views: 2747

Answers (2)

jaf0
jaf0

Reputation: 1158

When you add the onmouseover event handler in this manner, you will not see it in the dom.

I would recommend that you store the index as a data property in the DOM. Then you will be able to access it from the mouseover method ...

for (var i = 0; i < relatedProperties.length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.setAttribute('data-index', i);
    div.className = "item_holder";
    div.onmouseover = PanToMarker;
    document.getElementById('relatedpropertyDIV').appendChild(div);
}

function PanToMarker() {
    var selectedIndex = this.getAttribute('data-index');
    map.panTo(relatedProperties[selectedIndex].geometry.location);
}

There may be performance implications since you will be appending i elements to the DOM, each of which may cause a re-draw. It might be better to create all the elements first, then append once.

var section = document.createElement('section');
for (var i = 0, length = relatedProperties.length; i < length; i++) {
    var div = document.createElement("div");

    div.innerHTML = relatedProperties[i].formatted_address;
    div.setAttribute('data-index', i);
    div.className = "item_holder";
    div.onmouseover = PanToMarker;
    section.appendChild(div);
}

document.getElementById('relatedpropertyDIV').appendChild(section);

function PanToMarker() {
    var selectedIndex = this.getAttribute('data-index');
    map.panTo(relatedProperties[selectedIndex].geometry.location);
}

Upvotes: 2

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

I would imagine you need to wrap your onmouseover function like this:

div.onmouseover = function() {
    PanToMarker(relatedProperties[i].formatted_address);
};

This is because when you click on the element, the onmouseover function gets called with no arguments. When you specify arguments to PanToMarker like in your question, instead of assigning the function as may be intuitive, instead it executes the function then and there, and then assigns the function's output. Wrapping the function like this assures that the function doesn't get called instead while you're trying to assign it.

Upvotes: 3

Related Questions