Reputation: 59
I have a PHP page that calls a JavaScript function on another page in order to load one of 60 images (1 for each second). Each image has a number in its name (i.e. 1-60) and when the user presses the button the image that is loaded corresponds to the second when the button is pressed.
I have the JavaScript page returning the current seconds but I cannot seem to reference the correct image name. Is this a JavaScript syntax problem or should the 'seconds' variable be captured separately through Ajax:
<img src=<?php echo image-1.jpg' ) ?> id="imageX" />
<div id="mySec">Seconds</div>
<button type="button" onclick="myFunction_1()">Function_1</button>
<script>
function myFunction_1() {
var d = new Date();
var x = document.getElementById("mySec");
x.innerHTML=d.getSeconds();
var z = d.getSeconds();
document.getElementById("imageX").src="<?php echo 'image-' . "z". '.jpg' ?>" ;
}
</script>
Upvotes: 1
Views: 123
Reputation: 22271
Try:
<img src="image-1.jpg" id="imageX" />
And:
<script>
function myFunction_1() {
var d = new Date();
var x = document.getElementById("mySec");
var z = d.getSeconds();
x.innerHTML = z + ' Seconds';
document.getElementById("imageX").src = 'image-' + z + '.jpg';
}
</script>
No need for PHP at all.
Upvotes: 3