...

View Full Version : document.getElementById() - HELP!



matafy
05-18-2012, 08:51 AM
What I'm trying to get are the tag ids separately after I call the callback function. I've been racking my brain for far too long on this one. Here is a shorter version of what I have. I'm using the array's length to count and break into their own lines.

How do i get all 9 id="hover_[index]" separately using my array length?



var info = Array("bla_1", "bla_2", "bla_3", "bla_4", "bla_5", "bla_6", "bla_7", "bla_8", "bla_9");

function callback(results, status) {
if (status == myStatus) {
for (var i = 0; i < results.length; i++) {
send(results[i]);
}
}
}
function send(info) {
document.getElementById('results').innerHTML += "<div id='hover_"+info.length+"'>Something</div>";
hover_target = document.getElementById('hover_'+info.length);// how do i get all 9 hover_[index] separately?
someEvent.addDomListener(hover_target, 'mouseover', function() {
// do something
});
}


Thank you so much in advance,
Frank

devnull69
05-18-2012, 09:56 AM
With a for loop


for(i=0; i<info.length; i++) {
// hover_target will hold a single element per loop
hover_target = document.getElementById('hover_' + i);
}

matafy
05-18-2012, 10:44 AM
Thank you for responding...

My array has two values when I do a search for "cars" in my area. I tried it and had some issues with it. When I tested it with an alert(). I received these alerts:

hover_0
hover_0
hover_1

and sometimes it doesn't show the first result. It would start with 2 thru how ever long the result was.

Please excuse the length, but this is the script.



// POPULATE SEARCH REQUEST
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
// POPULATE MARKERS & INFOWINDOW RESULTS
function createMarker(place) {
var myIcon = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71,71),
new google.maps.Point(0,0),
new google.maps.Point(17.5,35),
new google.maps.Size(35,35));
// MARKER INFO
var marker = new google.maps.Marker({
title: place.name,
map: map,
position: place.geometry.location,
icon: myIcon
});
// GET LOCATION DETAILS
var referenceRequest = {reference: place.reference};
service.getDetails(referenceRequest, function(the, status) {
markersArray.push(marker);// where should it be placed?
// LISTEN FOR CLICK
google.maps.event.addListener(marker, 'click', function() {
if(the.website == undefined){
var webLink = "<img src="+the.icon+" width='25' height'25'/>";
} else {
var webLink = "<a href='"+the.website+"' target='_blank'><img src="+the.icon+" width='25' height'25'/> Website</a>";
}
var theIcon = "<div id='infoWindow'>"+webLink;
var title = "<h3>"+the.name+"</h3>";
var theAddress = "<p class='p1'>"+the.formatted_address+"</p>";
var thePhoneNum = "<p class='p2'>"+the.formatted_phone_number+"</p></div>";
infowindow.setContent(theIcon+title+theAddress+thePhoneNum);
infowindow.open(map, this);
map.panTo(this.getPosition());
});
// POPULATE RESULTS UNDER MAP
document.getElementById('resultH3').innerHTML = "<h3>We found "+markersArray.length+" near you:</h3><hr>";
document.getElementById('results').innerHTML += "<div id='hover_"+markersArray.length+"'>"+markersArray.length+". <b> "+the.name+"</b> - "+the.formatted_address+"</div><hr>";
// TARGET THE HOVER IDS ?!?!
for(j = 0; j < markersArray.length; j++) {
var openInfoWindow = document.getElementById('hover_'+j);
alert('hover_'+j);
}
// LISTEN FOR HOVER
google.maps.event.addDomListener(openInfoWindow, 'mouseover', function() {
if(the.website == undefined){
var webLink = "<img src="+the.icon+" width='25' height'25'/>";
} else {
var webLink = "<a href='"+the.website+"' target='_blank'><img src="+the.icon+" width='25' height'25'/><p> Website</p></a>";
}
var theIcon = "<div id='infoWindow'>"+webLink;
var title = "<h3>"+the.name+"</h3>";
var theAddress = "<p class='p1'>"+the.formatted_address+"</p>";
var thePhoneNum = "<p class='p2'>"+the.formatted_phone_number+"</p></div>";
infowindow.setContent(theIcon+title+theAddress+thePhoneNum);
infowindow.open(map, marker);
map.panTo(marker.getPosition());
});
});
}


You can see what I mean if you see first hand...
frankmata.com/map

felgall
05-18-2012, 11:22 AM
You are closing the loop too soon - the code starting google.maps.event.addDomListener(openInfoWindow, 'mouseover', function() { needs to be inside the loop otherwise you just overwrite the openInfoWindow field with all the values and then just attach a listener to the last one instead of attaching a listener to each.

matafy
05-18-2012, 12:01 PM
You are closing the loop too soon - the code starting google.maps.event.addDomListener(openInfoWindow, 'mouseover', function() { needs to be inside the loop otherwise you just overwrite the openInfoWindow field with all the values and then just attach a listener to the last one instead of attaching a listener to each.

I went from this:



// TARGET THE HOVER IDS ?!?!
for(j = 0; j < markersArray.length; j++) {
var openInfoWindow = document.getElementById('hover_'+j);
alert('hover_'+j);
}
// LISTEN FOR HOVER
google.maps.event.addDomListener(openInfoWindow, 'mouseover', function() {
if(the.website == undefined){
var webLink = "<img src="+the.icon+" width='25' height'25'/>";
} else {
var webLink = "<a href='"+the.website+"' target='_blank'><img src="+the.icon+" width='25' height'25'/><p> Website</p></a>";
}
var theIcon = "<div id='infoWindow'>"+webLink;
var title = "<h3>"+the.name+"</h3>";
var theAddress = "<p class='p1'>"+the.formatted_address+"</p>";
var thePhoneNum = "<p class='p2'>"+the.formatted_phone_number+"</p></div>";
infowindow.setContent(theIcon+title+theAddress+thePhoneNum);
infowindow.open(map, marker);
map.panTo(marker.getPosition());
});


to this:



// TARGET THE HOVER IDS ?!?!
for(j = 0; j < markersArray.length; j++) {
var openInfoWindow = document.getElementById('hover_' + j);
alert('hover_'+j);
document.getElementById('TESTING').innerHTML = "hover_" + j;
// LISTEN FOR HOVER
google.maps.event.addDomListener(openInfoWindow, 'mouseover', function() {
if(the.website == undefined){
var webLink = "<img src="+the.icon+" width='25' height'25'/>";
} else {
var webLink = "<a href='"+the.website+"' target='_blank'><img src="+the.icon+" width='25' height'25'/><p> Website</p></a>";
}
var theIcon = "<div id='infoWindow'>"+webLink;
var title = "<h3>"+the.name+"</h3>";
var theAddress = "<p class='p1'>"+the.formatted_address+"</p>";
var thePhoneNum = "<p class='p2'>"+the.formatted_phone_number+"</p></div>";
infowindow.setContent(theIcon+title+theAddress+thePhoneNum);
infowindow.open(map, marker);
map.panTo(marker.getPosition());
});
}


but some how the mouseover listener doesn't work. The alert message now reads, "hover_0" twice. I just don't know what to do... (pulling my hair from my bald head)

felgall
05-18-2012, 12:21 PM
What happens if you reverse the loop:


for(j = markersArray.length-1; j >= 0; j--) {

it shouldn't matter which way around you add the listeners and running it the opposite way may give a clue as to why it isn't working properly.

matafy
05-18-2012, 12:34 PM
I tried and all I got was:

alert():
hover_0
hover_1
hover_0

the hover actually worked on the first hover_0 , but not the second. I know it has three results, but only two showed.

Could it be that I positioned the markersArray.push(marker) in the wrong location? It's currently under the var referenceRequest...

felgall
05-18-2012, 10:00 PM
That result indicates that markersArray.length is always either 1 or 2.

The code that appears to be actually counting the markers is:


function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}

so if you were to add the extra code you want into the end of that already existing loop you should get it processing all the markers since they are being added by that loop.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum