Изменить ссылку и текст в зависимости от URL после нажатия

Question

Я должен изменить тег привязки, в зависимости от текущего URL. Поскольку веб-сайт изменяет URL-адрес, но не загружает новую страницу, он также должен меняться при каждом нажатии на указанную ссылку.

Пока у меня есть это:

window.onload = function() {
        var url = window.location.pathname;
        var linkContact = "/contact/";
        var contact = document.getElementById('contact');

        if (url == linkContact) {
            contact.innerHTML = '<ul><li><a href="/"><span>Close</span></a></li></ul>';
        } else {
            contact.innerHTML = '<ul><li><a href="/contact/"><span>Contact</span></a></li></ul>';
        }

        contact.addEventListener("click", function() {
            var urlNew = window.location.pathname;
            if (urlNew == linkContact) {
                contact.innerHTML = '<ul><li><a href="/portfolio/"><span>Contact</span></a></li></ul>';
            } else {
                contact.innerHTML = '<ul><li><a href="/"><span>Close</span></a></li></ul>';
            }
        }                                                       
    );
    }

Но это работает только до 3 кликов. После этого кнопка больше не меняется. Поскольку я действительно не знаю JS, я думаю, что переменная URL не обновляется при каждом щелчке, поэтому после выполнения, когда она просто не видит изменения. Если да, что я могу сделать, чтобы проверять URL при каждом клике?