dynamic javascript image change

Question

My site has a folder "images" with jpg images numbered 1-8 (1.jpg, 2.jpg etc.), an image tag, and also two canvases "nextPage" and "previousPage". what I'm trying to do is: when the "nextPage" canvas is clicked the image will change to the next image in the "images" folder, and when the "previousPage" is clicked the image will change to the previous image in the "images" folder. this is the code I've tried for the "nextPage" but the image doesn't change as it is supposed to.

    <img id="image" src="Images/1.jpg" />
    <canvas class=" navigation" id="nextPage" ></canvas>
    <canvas class="navigation" id="formerPage"></canvas>

    <script>
        var currentPage = 1;
        var lastPage = 8;
        var firstPage = 1;        

        var btnNext = document.getElementById("nextPage");
        btnNext.onclick = functionNext;
        function functionNext() {
            if (currentPage < lastPage) {
                currentPage++;
                document.getElementsById("image").src = "Images/" + currentPage + ".jpg";
            }

        }
    </script>

Danny Delott · Accepted Answer · 2015-07-06 17:26:47Z

2

You've got a typo in your functionNext(). It should be document.getElementById.

    var btnNext = document.getElementById("nextPage");
    btnNext.onclick = functionNext;
    function functionNext() {
        if (currentPage < lastPage) {
            currentPage++;
            document.getElementById("image").src = "Images/" + currentPage + ".jpg";
        }
    }

answered Jul 6, 2015 at 17:26

Danny Delott

7,0284 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamic javascript image change

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related