Search code examples
htmlanchorrelative-url

HTML anchor element not redirecting to relative path on click

I have several anchor elements in a navigation bar that are all supposed to redirect to other pages that are extensions of the root url. So, for example, I have a "login" anchor element with href="/login". All of these used to work -- they would redirect to the proper page when clicked -- but then they stopped working after I added some new content to the nav bar. Now, when I click the anchor links nothing happens. I have since deleted all the new content I'd added, but the problem is still persisting.

Here is the HTML for the nav element

<header class="header">
  <nav class="nav">
    <ul class="nav__el--list">
      <li><a href="/home">Home</a></li>
      <li><a href="/projects">Projects</a></li>
      <li><a href="/sources">Sources</a></li>
    </ul>
    <div class="header__logo"><img src="/img/header-logo.png" alt="logo" style="height:100%; width:100%"/></div>
    <div class="nav__el--user"> 
        <a class="nav__el nav__el--login" href="/login">Log in</a>
        <a class="nav__el nav__el--cta" href="/signup">Sign up</a>
    </div>
  </nav>
</header>

Troubleshooting steps I've taken:

  1. I verified that the browser recognizes the proper href -- when I hover the cursor over the anchor element link, the correct url shows up in the bottom-left of the browser

  2. I verified that the pages the anchor links are supposed to redirect to are functioning properly -- I did this by typing the url directly into the browser search bar

  3. I verified that the browser is registering a "click" on the anchor link element -- I attached a "click"-triggered event listener to the anchor element and when I click on the anchor element, the event listener is triggered.

  4. In the Chrome dev tools, in the "Elements" tab, I located the source HTML for the anchor element and clicked on the href link in the source code and was redirected to the correct page -- but clicking on the anchor element on the actual browser page still did not work

  5. I opened the page without any css to see if there was something in the styling that was causing the problem, but even on the HTML-only page nothing happened when I clicked the anchor element

  6. I cleared the browser cache, cookies, and history and restarted the browser but this did not solve the problem

  7. I opened the page on a different browser but this did not solve the problem

Any advice would be much appreciated!

Solution

  • One potential solution to this problem would be to add event.preventDefault() to your click event listener. This will prevent the default behavior of the anchor element (redirecting to the Href link) and allow you to manually redirect to the correct page using JavaScript.

    This code should manually redirect the user to the correct page when the "Log in" link is clicked

    const loginLink = document.querySelector('.nav__el--login');

loginLink.addEventListener('click', function(event) {
  event.preventDefault();
  window.location.href = "/login";
});

    If this does not work it could be some other JS code in the way.

    https://www.w3schools.com/js/js_window_location.asp