动态javascript图片更改

Question

我的网站有一个文件夹“images”，jpg图片编号为1-8（1.jpg，2.jpg等）， 一个图像标签， 还有两幅画布“nextPage”和“previousPage”。 我要做的是： 单击“nextPage”画布时，图像将更改为“images”文件夹中的下一个图像，单击“previousPage”时，图像将更改为“images”文件夹中的上一个图像。 这是我为“nextPage”尝试过的代码，但图像没有像预期的那样改变。

    <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>

Answer 1

你的functionNext()中有一个拼写错误。它应该是document.getElementById。

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