Javascript: Update inner html when URL changes

Question

I have a dropdown menu with anchor links for my page. I want to change the button contents to reflect which anchor it is currently on. To do this I wrote a function that is executed when the button is clicked. It then goes through the array of anchor names and if it matches the array item to the current URL, it updates the button. Like so:

<button onclick="changeURL()">Select Section</button>

function changeURL() {
// function that gets the current url and gets the word after the hash
    var url=window.location.hash;
    console.log(url);
    // loop through array keys and see if hash mashes url
    for (let i=0; i < keys.length; i++) {

      currentURL = "#" + keys[i];
        if (url == currentURL) {
            document.getElementById("dropdownbutton").innerHTML= keys[i];
            break;
        }
    }

}

However, this doesn't work correctly. While the button is being updated, it is only after it is clicked the second time that the function is executed and the URL is matched again. You can see this below (see the URL in the address bar vs the option I choose):

This is pretty useless since button needs to reflect the current anchor link, not the one before it. How do I correct my code to reflect the current anchor link? How can I change the innerHTML of the button as soon as the URL changes? Right now it is always one behind the actual one.

charlietfl · Accepted Answer · 2021-08-15 12:10:11Z

1

You could use the hashchange event to change the text

const keys = ['a-thing', 'my-dog', 'foo-bar'],
      dBtn = document.getElementById('dropdownbutton'),
      defaultText = ''

window.addEventListener('hashchange', function(e){ 
  const key = keys.find(k => location.hash === '#' + k );
  dBtn.textContent = key ? key : defaultText;
});

<div>
  <button id="dropdownbutton"></button>
  <div><a href="#a-thing">A thing</a></div>
  <div><a href="#my-dog">My Dog</a></div>
  <div><a href="#foo-bar">Foo Bar</a></div>
</div>

answered Aug 15, 2021 at 12:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aman Over a year ago

This works like magic, thank you so much. I didn't know the hashchange event existed. You have been most helpful :)

Fth · Accepted Answer · 2021-08-15 11:56:25Z

0

You could add onclick event for your dropdown-contents and call your function when a content is clicked. Example:

<ul id="dropdownbutton">
    <li><a href="#" onclick="changeURL()"></a></li>
    <li><a href="#" onclick="changeURL()"></a></li>
</ul>

answered Aug 15, 2021 at 11:56

Fth

1152 silver badges20 bronze badges

1 Comment

Aman Over a year ago

This has the same issue as I need to double click the link before the text changes.

Collectives™ on Stack Overflow

Javascript: Update inner html when URL changes

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related