In HTML how to add content to one page based on user action in a different page

Hi, new to coding. For practice, I’m building a simple html adventure choice game. I want an anchor (a choice) to be shown on one page only after a previous page has been viewed. I think I’ll need to use “script” and/or an onclick event, or onload event, etc. but I’m not sure how to make a click or an onload event on one page, add content to a different page.

For example, only after you choose to take the candle from the kitchen page choices, will you be able to see the link to explore the basement in the cottage page choices.

One of the easiest ways to achieve this goal is to use localStorage. With localStorage, you can access information in between refreshes and different pages of the same domain.

You can set localStorage at any point and then retrieve the information at any other point. It will work great for what you’re trying to achieve.

Check out this W3Schools about localStorage: JavaScript Local Storage

Thanks so much! Will do!

No problem! If you get stuck, come back here, and someone is bound to help you out. Good luck!

1 Like

Just an update, thanks for pointing me in the right direction!

I finally figured out how to make this work with a lot of googling and trial and error on code syntax.

I have a main start page that resets all the needed storage.setitems to “” (empty value), so every time you die and get sent back to the start page, it resets all your previously unlocked options. Then when a prerequisite page is loaded it does a .storage.setitem to “on”. Then when a page with optional choices is loaded, it uses an if/else statement to check for the .storage value. If it is “” it does not show the link, if it is “on” it does show the link. Not sure if it’s the best solution to this problem, but I got it to work so it’s a win for a new coder like me.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.