Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    59
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Question document.getElementById() - HELP!

    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?

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

    function 
    callback(resultsstatus) {
        if (
    status == myStatus) {
            for (var 
    0results.lengthi++) {
                
    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    With a for loop
    Code:
    for(i=0; i<info.length; i++) {
       // hover_target will hold a single element per loop
       hover_target = document.getElementById('hover_' + i);
    }

  • Users who have thanked devnull69 for this post:

    matafy (05-18-2012)

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    59
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.

    PHP Code:
    // POPULATE SEARCH REQUEST
    function callback(resultsstatus) {
        if (
    status == google.maps.places.PlacesServiceStatus.OK) {
            for (var 
    0results.lengthi++) {
                
    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({
            
    titleplace.name,
            
    mapmap,
            
    positionplace.geometry.location,
            
    iconmyIcon
        
    });
        
    // GET LOCATION DETAILS
        
    var referenceRequest = {referenceplace.reference};
            
    service.getDetails(referenceRequest, function(thestatus) {
                
    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(mapthis);
                        
    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(0markersArray.lengthj++) {
               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(mapmarker);
                    
    map.panTo(marker.getPosition());
            });
        });

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

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,611
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Apr 2009
    Posts
    59
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    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:

    PHP Code:
    // TARGET THE HOVER IDS ?!?!
    for(0markersArray.lengthj++) {
       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(mapmarker);
            
    map.panTo(marker.getPosition());
    }); 
    to this:

    PHP Code:
    // TARGET THE HOVER IDS ?!?!
    for(0markersArray.lengthj++) {
        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(mapmarker);
                
    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)

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,611
    Thanks
    0
    Thanked 645 Times in 635 Posts
    What happens if you reverse the loop:

    Code:
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Apr 2009
    Posts
    59
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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...
    Last edited by matafy; 05-18-2012 at 11:38 AM.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,611
    Thanks
    0
    Thanked 645 Times in 635 Posts
    That result indicates that markersArray.length is always either 1 or 2.

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

    Code:
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •