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 amirbizimana
amirbizimana
9,639 Points

Best way to track same page anchor links

Within a given web page I want to know which same page anchors are being clicked the most by console logging their text value once they are clicked.

Initially I though about listening and returning text value for all anchors with an '#' in its href attribute, however that would not work as some of the anchors still have a '#' in their href attribute but its not intended to point to a section of the site.

So now my main approach was to check the url string for any hash changes at the end of it and if there was one then I console log the anchor's text value.

Would this be the best approach to solve the problem or are there any simpler ways of going about it ?

var anchor = $("a[href^=\\#]");
var hashChange = false;

anchor.on("click", function(){
if($(window).onhashchange !== hashChange){
    var anchorText = this.text;
        console.log(anchorText);
} 
});

This is the code I started to write but there are some shortcomings, its collecting a text value for any anchors that contains a '#' regardless of its a same page anchor leading to a page section or not.

Any feedback is greatly appreciated.

3 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

An easy solution is to use a class to identify the items you want to track. For example, I see this one has the class "list-group-item". If we can rely on all the desired ones having that class:

var anchor = $("a.list-group-item");

anchor.on("click", function() {
  var anchorText = this.text;
  console.log(anchorText);
});

And if that class isn't shared by them all (or is used for other things), just create a new class for this purpose (maybe "sectionAnchor") and give it to the ones you want.

amirbizimana
amirbizimana
9,639 Points

Steven Parker thank you for your help ! Your solution worked, it was a good approach that helped me fix my code, you can see it below. However with the websites i was working with i had some recurring issues with a share this page button. I had to include .not() object to omit it from the rest of the anchors i wanted to target. From the get go it would have been easier to share the html i was working on but since its a project from work i' m not able to. Thanks again !

    var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");

       anchor.on("click", function(){
          var anchorText = this.text;
          $(window).one("hashchange",function() {
            console.log(anchorText);
         });
      });
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

What is it you expect "$(window).onhashchange" to do? I don't think a jQuery object has a property by that name.

But undefined !== false so the "if" won't filter anything.

amirbizimana
amirbizimana
9,639 Points

I was looking to take the page's url and check if it had received a hash change at the end of it, and if so return the anchor's inner text value. After reworking the code I came up with this 

var anchor = $("a[href^=\\#]");

anchor.on("click", function(){
if("onhashchange" in window){
    var anchorText = this.text;
        console.log(anchorText);
} 
});

the issue im having though is that's its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.

Would the approach i took need to be revised to even begin with ? Would there be any better reasoning to solve this ?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

The expression ("onhashchange" in window) is another "always true" condition.

I'm not sure I understand what you're trying to detect. Can you give me an example of an anchor that has "#" but is not pointing to a section on the site?

amirbizimana
amirbizimana
9,639 Points
amirbizimana
amirbizimana
9,639 Points 
<!-- Where the click on the anchor i want to target happens  -->

 <nav>
   <h2 class="wb-inv">Promotions</h2>
     <ul class="toc lst-spcd col-md-12">
       <li class="col-md-4">
         <a href="#story1" class="list-group-item">Anchor for section 1</a>
       </li>
    </nav>

 <!-- below is the section of the same page the anchor would point to -->
  <div class="col-md-12 pull-left">
    <h2 id="story1">Section 1 Title </h2>
      <p>Random paragraph 1</p> 
   </div>

 <!-- The html I'm working with contains a set of tabs that reveal information as you click them.
The href attribute and the id are both in the anchor. 
This is an example of anchors I wouldn't want to track-->

<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
   <h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>
<a tabindex="-1" id="details-panel2-lnk" role="tab" aria-selected="false" aria-controls="details-panel2" href="#details-panel2">
   <h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">By phone</h2>
</a>
<a tabindex="-1" id="details-panel3-lnk" role="tab" aria-selected="false" aria-controls="details-panel3" href="#details-panel3">
    <h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">By mail</h2>
</a>