Put image on first page on the second page javascript

Question

So my problem is that I have two pages products.html and index.html on products.html I have multiple images and a button next to every image and each button corresponds to each image and when you click the button it links to index.html and on the index.html I have 1 image. I want to make it so every time I click a button it puts me to the index.html page and the corresponding image on products.html gets put on the index.html image

<div class="imgbx">
    <button onclick="window.location.href='index.html'" >Invisible button</button>
    <img src="images/xr-black.jpg" alt="">
</div>

Answer 1

Inside products.html add

<div class="imgbx">
    <button onclick="window.location.href='index.html?image=images/xr-black.jpg'" >Invisible button</button>
    <img src="images/xr-black.jpg" alt="">
</div>

In your main.html add

<img src="img" id="image">
<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const image = urlParams.get('image')
    document.getElementById('image').src = image;

</script>