Prevent reload page when click on button take you to the same page link?

Question

I would like to prevent an HTML button that acts like a link take you to the same page from reload the page

For Example: prevent reload the website when click on logo if you are in Homepage.

How can I do this?

Full code: https://codepen.io/Muh-Ail/pen/oNpLKXM?editors=0010

   let activeBtn = document.querySelector(".active-btn");
   let currentLocation = location.href;

    if (activeBtn.href === currentLocation) {

        activeBtn.preventDefault();

    }

Answer 1

Use this instead

let activeBtn = document.querySelector(".active-btn");
let currentLocation = location.href;


if (activeBtn.href === currentLocation) {
    activeBtn.addEventListener('click',function(e){
        e.preventDefault();
    });
}

Answer 2

You'd have to use the e.preventDefault(); from the listener ele.addEventListener("click", function (e) instead;

Also, you should wrap the js with:

document.addEventListener("DOMContentLoaded", () => {
// code here
});

You should add different links for you to be able to see.