0

On my page I have a javascript function that changes the current URL via pushState and hides a specific div when a user clicks on the text "close". The simplified page looks like this:

<div id='book'>
  <a onclick='close();'>close book information</a>
  Book Information
</div>
<div id='booklist'>List of all books</div>

<script>
function close() {
    /* ... */
    document.getElementById("book").style.display = "none";
    window.history.pushState({path:newurl},'',newurl);
}
</script>

So the URL is "book.php?id=1" and shows information about one book on top of the books' list. If the user clicks on the close button, the URL changes to "book.php" and the book is hidden. However, if the user opens other books and then clicks the back button of their browser, the URL will change back to "book.php?id=1" but display=none is still active. How can I reverse the javascript that was done before? Refreshing the page would also be fine. I found this answer but since I cannot change the body tag, it doesn't work for me. I hope that you might have an idea how to solve this.

Riyuri
  • 28
  • 7

1 Answers1

0

Use this:

document.getElementById("book").style.display = location.search ? "block" : "none";
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • Sadly this doesn't work. It is called when opening a page for the very first time. If the user clicks on "close", the parameter is overwritten and the function is not called again. The book stays hidden. – Riyuri Jun 07 '21 at 11:38