Let's say my webpage is http://localhost/myApp/route/index.html

if I click on:

  <li><a href="#secondpage">go to second page</a></li>

It will change the route to http://localhost/myApp/route/index.html#/secondpage without reloading.

Now I'm trying to do the same thing but with just onclick and javascript instead of anchor tag. Because I need to do something first before I let angular router change to another template.

  <li><a onClick="myFunction()">Payroll Run History</a></li>

  myFunction(){
      [... do stuff ...]
      //change to http://localhost/myApp/route/index.html#/secondpage   without reloading page
  }

Let's say my webpage is http://localhost/myApp/route/index.html

if I click on:

  <li><a href="#secondpage">go to second page</a></li>

It will change the route to http://localhost/myApp/route/index.html#/secondpage without reloading.

Now I'm trying to do the same thing but with just onclick and javascript instead of anchor tag. Because I need to do something first before I let angular router change to another template.

  <li><a onClick="myFunction()">Payroll Run History</a></li>

  myFunction(){
      [... do stuff ...]
      //change to http://localhost/myApp/route/index.html#/secondpage   without reloading page
  }

• javascript
• html

4 Answers 4

To set the anchor property:

location.hash = "#/secondpage";

First of all, don't use onclick attribute, browsers and pop-up blockers don't like it. Give an ID to your element and create an event listener in JavaScript.

document.getElementById('my_link').addEventListener("click", function(event) {
  // Prevent defualt action of event:
  event.preventDefault();

  // Do your extra stuff here...
 
  location.hash = event.target.getAttribute('href').substr(1);
});

<a href="#/secondpage" id="my_link">Click here</a>

If you are looking to navigate to a second page instead of a section of a page..you can use window.location

here is an example

document.getElementById('click').onclick=function(){
var div=document.createElement('div');
div.innerHTML='I just append this div before changing my location';
document.body.appendChild(div);
window.location='http://www.google.';
}

#click:hover{
  cursor:pointer;
}

<li id='click'>Click here</li>

You will notice I added a div to the body tag and then change my location....

window.location.hash = "secondpage";

It will set the #secondpage in the URL and will scroll to that ID.