Question

a javascript+DOM question.

Can someone improve my code?

I have a page nav bar like this (on some pages):

<div id="pagebar">
<a href="iraq_pixra1.html">1</a>
<a href="iraq_pixra2.html">2</a>
<a href="iraq_pixra3.html">3</a>
<a href="iraq_pixra4.html">4</a>
<a href="iraq_pixra5.html">5</a>
<a href="iraq_pixra6.html">6</a>
</div>

I want my javascript to change the link style so that the style of the current page is highlighted.

My javascript code is this. It finds the current page’s url, then try to match it with one of the link tag. If match, then set style.

function setPageBarStyle() {
    var pageNavBar = document.getElementById("pagebar");

    if (pageNavBar != null) {
        var fPath = document.location.pathname;
        var fPathParts = fPath.split('/');
        var fName = (fPathParts[fPathParts.length-1]); // file name after last slash. e.g. xyz.html

        var linkTags = pageNavBar.getElementsByTagName("a");
        for (var ii = 0; ii < linkTags.length; ii++) {
            var aUrl = linkTags[ii].href;
            var aUrlParts = aUrl.split("/");
            var aUrlLastPart = (aUrlParts[aUrlParts.length-1]); // part after last slash. e.g. xyz.html
            if (aUrlLastPart == fName) { 
                linkTags[ii].style.border="thin solid blue";
            }
        }
    }
}

setPageBarStyle();

How can i improve the code? I am new to DOM scripting.

The way i split the path seem too verbose, with many variables. I think it can be done with regex, but don’t know how with javascript/DOM.

Thanks.

Answer 1

You can change this:

var aUrl = linkTags[ii].href;
var aUrlParts = aUrl.split("/");
var aUrlLastPart = (aUrlParts[aUrlParts.length-1]); // part before last slash. e.g. xyz.html

With this:

  var aUrlLastPart = linkTags[ii].href.split("/").pop();

The Pop() method will return the last element of the array returned by split() and remove it from the array (which in your case, is irrelevant).

I would also recommend checking out jQuery or similars, in order to manage cross browser JS easier…

Let me know if it helps! 🙂