How can I build a random story-and-image picker with JavaScript?

If the content is going to grow, store the stories and images as records rather than creating separate hard-coded pages. A basic record could contain an ID, title, story text, and an array of image paths. For a larger site, a database can store stories and images in separate tables, linked by the story ID, and the back end can request a random story with its associated images.

Build it in small steps: first make a button that always displays one known story, such as item 3. Then move the story number into a variable, add a second test story, and confirm both work. Once that makes sense, replace the fixed number with a random number between zero and the number of stories minus one. This lets you learn the pieces without trying to solve everything at once.

Start with a simple JavaScript array where each item keeps a story and its related image paths together. When the button is clicked, generate a random index, retrieve that item, and put its text and image source into the page. Keeping the related data in one object prevents a story from being paired with the wrong image.