CODEWITHSUNDEEP
phpjavascriptajax
TedtheBear
TedtheBear

Reputation: 59

Load image for each second

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

Answers (1)

iambriansreed
iambriansreed

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

Related Questions