How to set location and location.href using JavaScript?

Javascript Web Development Front End Technology

As we know, the onclick event occurs only when a user clicks the elements and it is a purely JavaScript attribute. Whenever you click on the onclick event it does some actions like displaying a message or redirecting the user to another page. The onclick event must be used very less in the website, because it may create the confusing to the users. So, use these event very wisely.

The window.location object is used to get the current page URL and it redirects the browser completely to a new page. It can be written without the prefix i.e., window-like location.href, and location etc., Some of the types of window location as follow −

location.href
location.hostname
location.protocol
location.assign()
location.pathname

In this article, we are going to learn how to set the location and location.href using the JavaScript.

Syntax

The following is the syntax for the setting location and location.href after clicking the button using the JavaScript −

location = URL
or
location.href = URL

Parameter

URL − Used to specify the URL

Steps

Follow the below-given steps to set the location and location.href after clicking the button in JavaScript −

Step 1 − Under the body section, we defined the heading, button and script elements.

Step 2 − Let’s define the style for the heading element of the HTML Document.

Step 3 − For the button element, the myLocation() method is defined. Using this method location will be changed when we press the button.

Step 4 − In myLocation() method, the location URL is mentioned clearly for which method functionality should be performed.

Step 5 − After clicking the button, the onClick event function is triggers and it changes the URL location.

Example

In this example, we are going to set the location after clicking the button with the help of JavaScript.

<html>
   <body> 
      <h2>Setting the location using the Javascript</h2>
      <p>Click the button to go to www.tutorialspoint.com</p>
      <button onclick ="myLocation()">
         Click Here to go to the URL
      </button>

      <script>
         //function to setting the location using the Javascript 
         function myLocation() {
            location = "https://www.tutorialspoint.com/";   
         }
      </script>
   </body>
</html>

Example

Let us see another example by using the location.href to set the location using the JavaScript.

<html> 
   <body> 
      <h2>Setting the location using the Javascript<h2>
      <button onclick ="hrefLocation()">
         Click Here to go to the Tutorials Point
      </button>
      <script>
         //function to setting the location using the Javascript 
         function hrefLocation() {
            location.href = "https://www.tutorix.com/index.htm";   
         }
      </script>
   </body>
</html>

Conclusion

In this article, we have demonstrated how to set the location and location.href along with examples. We have seen the two different examples here, we used the location property for setting the location of the URL. In the first and second example, we used the ‘location and location.href’ properties for setting the designated URLs.