-1

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>
Enio
  • 11
  • 5
  • Does this answer your question? [passing form data to another HTML page](https://stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page) – Richard Muvirimi Mar 20 '22 at 10:19
  • It's not a form its a button – Enio Mar 20 '22 at 10:30
  • it's the same concept, the link will hold information that the next page can use to display its content, ever seen `http://example.com?param1=value1&param2=value2` works also in an href styled as a button – Richard Muvirimi Mar 20 '22 at 10:35
  • It is difficult to do without some backend language like php, asp or java. You need to read the url parameter like @RichardMuvirimi said and based on it you need to create the html for index.html. If you want to do in just browser side javascript that also is possible but you need to think much more in that case – Vinay Mar 20 '22 at 14:46

1 Answers1

0

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>
Sheikh Haziq
  • 229
  • 1
  • 10