javascript - 动态javascript图像变化

Question

我的网站有一个文件夹“images”，其中包含编号为 1-8 的 jpg 图像(1.jpg、2.jpg 等)，图像标签，还有两个 Canvas “nextPage”和“previousPage”。我想做的是:当单击“nextPage” Canvas 时，图像将更改为“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";
        }
    }