Document.getElementById Error on .js file - drupal

Question

document.getElementById error
Drupal.behaviors.Menu = {
attach: function () {
var url = window.location.href;
var baseUrl = Drupal.settings.baseUrl;
var page1 = baseUrl+'/path/page1';
var page2 = baseUrl+'/path/page2';
var page3 = baseUrl+'/path/page3';
if($(".classname").length < 3) {
$( "#hook" ).append("<a class='classname' href='' id='page1_id'>page 1</a>");
$( "#hook" ).append("<a class='classname' href='' id='page2_id'>page 2</a>");
$( "#hook" ).append("<a class='classname' href='' id='page3_id'>page 3</a>");
}
if(url == baseUrl+'/path') {
document.getElementById("page1_id").href = page1;
document.getElementById("page2_id").href = page2;
document.getElementById("page2_id").href = page3;
}
}
};
Please dont confuse between page1 is(var) and page1_id is(id).
in the above function I known it was a error near the if statement
if(url == base...)
this is the exact spot where it is going error.
so want to known where i'm making the mistake as (the error is like this below)
--> when I open that particular page and those are menu links which are hooked perfectly and when I click on the page1 it opens perfectly.
The problem is what ever page i open first keeps on coming for the next two pages.
Like if I click on page2 first, next page1 or page3 (still it shows page2).
after page refresh
if I click on page3 first, next page1 or page2 (still it shows page3).
as the document.getElementById is holding the previous URL only.
help is greatly appreciated.

Answer 1

For user understanding my url is like
http://site.localhost/path/page1 (similarly page2 and page3)
This needs to be changed according when moved to staging and production
Below code solved my issue
!warning watch out comments.
Drupal.behaviors.Menu = {
attach: function () {
//var url = window.location.href;
var baseUrl = Drupal.settings.baseUrl;
var page1 = baseUrl+'/path/page1';
var page2 = baseUrl+'/path/page2';
var page3 = baseUrl+'/path/page3';
//modified
var parts = windows.loaction.pathname.split('/');
var query = parts[parts.length-1].split('.html');
//added these two variables for splitting the url.
if($(".classname").length < 3) {
$( "#hook" ).append("<a class='classname' href='' id='page1_id'>page 1</a>");
$( "#hook" ).append("<a class='classname' href='' id='page2_id'>page 2</a>");
$( "#hook" ).append("<a class='classname' href='' id='page3_id'>page 3</a>");
}
//if(url == baseUrl+'/path') {
if(query[0] == 'path' || query[0] == 'page1' || query[0] == 'page2' || query[0] == 'page3'){
document.getElementById("page1_id").href = page1;
document.getElementById("page2_id").href = page2;
document.getElementById("page2_id").href = page3;
}
}
};