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>
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>