Skip to main content

How to Solve the "TypeError: window.location.href is not a function" Error

The TypeError: window.location.href is not a function is a common error in JavaScript that occurs when you try to invoke window.location.href as a function with parentheses (). This error stems from a fundamental misunderstanding of the difference between a property and a method.

This guide will explain exactly why this error happens and show you the correct ways to redirect a user to a new page, including setting the href property and using the assign() and replace() methods.

The Core Problem: Properties vs. Methods​

It's crucial to understand the difference between a property and a method on an object:

  • A Property is a value that you can get or set. Think of it as a noun. For example, car.color is a property. You would set it like this: car.color = 'blue'.
  • A Method is a function that you can call to perform an action. Think of it as a verb. For example, car.start() is a method. You call it with parentheses: car.start().

The window.location.href is a property. It holds a string representing the current URL of the page. The error occurs because you are trying to call it like a method.

Example of problem:

// PROBLEM: Trying to call the `href` property as if it were a function.
window.location.href('https://example.com');

Error Output:

Uncaught TypeError: window.location.href is not a function

The Solution: Assigning a Value to window.location.href​

The correct and most common way to redirect the browser to a new page is to assign a string containing the new URL to the window.location.href property.

Solution:

// Correct: Assign the new URL string to the `href` property.
window.location.href = 'https://example.com';
note

This is the most idiomatic and widely-used method for performing a redirect in client-side JavaScript.

Alternative Methods: assign() and replace()​

The window.location object also provides two methods that can be used for navigation.

The assign() Method​

The window.location.assign() method navigates to the given URL. It behaves almost identically to setting window.location.href.

// This also works and has the same effect as setting .href
window.location.assign('https://example.com');
note

While this is perfectly valid, setting the href property directly is more common and concise.

The replace() Method (A Key Difference)​

The window.location.replace() method also navigates to a new URL, but with one critical difference: it replaces the current page in the session history. This means the user cannot use the "Back" button in their browser to return to the original page.

// This will redirect, and the user will not be able to navigate back.
window.location.replace('https://example.com');
note

This is very useful after a form submission or a login process, where you don't want the user to be able to go back and resubmit the form.

Practical Example: A Redirect Button​

This script demonstrates a common use case: a button that redirects the user to a new page when clicked.

HTML:

<button id="redirect-btn">Go to Example.com</button>

JavaScript:

const redirectButton = document.getElementById('redirect-btn');

redirectButton.addEventListener('click', () => {
  console.log('Redirecting to example.com...');
  
  // Use .replace() for a one-way navigation
  // window.location.replace('https://example.com');
  
  // Use .href for a standard navigation
  window.location.href = 'https://example.com';
});

Conclusion​

The TypeError: window.location.href is not a function is a clear signal that you are trying to call a property.

To solve it, you must assign a value instead of invoking it:

  • window.location.href = '...': The most common and recommended method for a standard redirect.
  • window.location.assign('...'): A valid alternative that achieves the same result as setting href.
  • window.location.replace('...'): Use this when you want to redirect and prevent the user from navigating back to the original page.

Table of Contents