Im not good at programming in PHP and JS, but im trying to make a button that changes the background image from an ID element that is inside of a incorporated style ( element) using this code:
My PHP/HTML code and button:
<?php
$old-img-url = 'old-image.png';
$new-img-url = 'new-image.png';
?>
<style> #my-div-id *{ background-image: url('<?php echo $old-img-url ?>'); } </style>
<div id='my-div-id'>
// my extra code...
</div>
<?php
echo "<button onclick='changeImage()'>Change image</button>";
?>
My script (out of the PHP code):
<script>
function changeImage() {
const Imagechange = document.querySelector('#my-div-id');
Imagechange.style.backgroundImage = "url('<?php echo $new-img-url ?>')";
}
</script>
Welp, my problem is that the button works and loads the url of the new background image for the ID, but it doesn’t replace it. It appears like this:
Error screenshot
It’s there any way to fix this? And if not, is there an alternative for give a solution to this? Thanks and cheers.
Note: I tried quitting some PHP line codes to convert then in HTML elements, because i know that PHP renders all the elements written inside of it into the page and doesn’t allows you to do more changes when it is rendered, so then, i tried to do that to see if there was a difference, but there wasn’t. So it stills with the same problem.