So I have this code where it changes the image on the other page
<div class="imgbx">
<button onclick="window.location.href='index.html?image=images/xr-black.jpg&tit=XR-black'" >Invisible button</button>
<img src="images/xr-black.jpg" alt="">
</div>
and this is the other page part
<img id="image" src="images/xr-blue.jpg" alt="Grill" class="img" >
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const image = urlParams.get('image')
const tit = urlParams.get('tit')
document.getElementById('image').src = image;
document.getElementById('tit').innerHTML = tit;
</script>
<h1 id="tit"></h1>
Now the image is changing just fine but I just can't seem to make the h1 tag to work and change the content inside
To paraphrase, you are saying that when you try and change the header on another page to match the image that changes on another page, the image changes however the header is not changing.
Have you tried using a boolean to trigger the header color change?
if imageColor = true{ h1="000000"};