Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Strand
Michael Strand
10,897 Points

.Push method issues with showing and hiding elements

I am looking for assistance with my JS function that is meant to filter some markers on a map. I have part of it working when I have one element pushed to only one object in my var mapMarkers.

In the JS file as it is now, if I were to click on marker one my elements won't display, but if I click marker three they will display.

I'm trying to figure out if its more of an issue with how the push method works or if I don't have my for loop setup correctly. It properly sets the show-markers class to the span as expected but even so it won't display the elements.

Hopefully that helps clear the air on where I'm at and thanks in advance for the help.

My HTML looks something like this:

<div id="map-marker-options">
   <span class="map-markers show-markers" id="map-markers-one">One</span>
   <span class="map-markers" id="map-markers-two">Two</span>
   <span class="map-markers" id="map-markers-three">Three</span>
   <span class="map-markers" id="map-markers-four">Four</span>
</div>

Javascript

function markerFilter() {
   var mapMarkers = {
      'one':[],
      'two':[],
      'three':[],
      'four':[],
   }

   mapMarkers.one.push('location.36.address');
   mapMarkers.one.push('location.37.address');

   mapMarkers.three.push('location.35.address');
   mapMarkers.three.push('location.36.address');
   mapMarkers.three.push('location.37.address');

   console.log(mapMarkers);

   $('span.map-markers').on('click',function(){

      // Add active class
      if ($(this).hasClass('active')) {
         $('span.map-markers').addClass('active');
      } else {
         $('span.map-markers').removeClass('active');
         $(this).addClass('active');
      }

      // Add show-markers class
      if ($(this).hasClass('all')) {
         $('span.map-markers').addClass('show-markers');
      } else {
         $('span.map-markers').removeClass('show-markers');
         $(this).addClass('show-markers');
      }

      $('span.map-markers').each(function(){
         var group = $(this).attr('id').replace(/map-markers-/,'');

         if ( $(this).hasClass('show-markers') ){
            showMarkers(group);
         } else {
            hideMarkers(group);
         }

      });
   });

   function showMarkers(group){
      markerGroup(group,true);
   }
   function hideMarkers(group){
      markerGroup(group,false);
   }
   function markerGroup(group,visible){
      var markerName;

      for(i in mapMarkers[group]){
         markerName = mapMarkers[group][i];
         smartMap.marker[markerName].setOptions({'visible':visible});
      }
   }
}

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

There's not enough code here to demonstrate the issue.

For example, the JavaScript code defines the "markerFilter" function but it is never called.

Michael Strand
Michael Strand
10,897 Points

At the end of my JS file I call the function when the document is ready.

$( document ).ready(function() {
    markerFilter();
});
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

That was just one example. For another, the function references "smartMap" but that is not defined in the code shown.

Michael Strand
Michael Strand
10,897 Points

Sorry for the lack of some information. Smart Map is an external source provided with this plugin. https://www.doublesecretagency.com/plugins/smart-map/docs/manipulating-the-map-in-javascript

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

My point is that the code shown here isn't enough to demonstrate the issue. You might need to supply a workspace snapshot or something like a github repo to make that possible.

But the log message shows that the "push" statements have successfully added items to the "mapMarkers" arrays. And it looks like the loop would always do the same thing, regardless of which item was clicked.