动态javascript图像更改

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

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

var currentPage=1；
var lastPage=8；
var firstPage=1；
var btnNext=document.getElementById（“下一页”）；
btnNext.onclick=functionNext；
函数functionNext（）{
如果（当前页<最后页）{
currentPage++；
document.getElementsById（“image”）.src=“Images/”+currentPage+”.jpg”；
}
}

您的

函数next（）

中有一个输入错误。它应该是

document.getElementById

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

var btnNext=document.getElementById（“下一页”）；
btnNext.onclick=functionNext；
函数functionNext（）{
如果（当前页<最后页）{
currentPage++；
document.getElementById（“image”）.src=“Images/”+currentPage+”.jpg”；
}
}