如何通过按钮修改URL页码以动态切换素描本扫描图片？

你的核心问题是点击按钮时没有重新计算图片URL并更新DOM元素的属性——你只在初始化时设置了一次图片链接，但按钮点击事件里没有更新页码后重新生成新URL、同步到图片和链接上。

下面是修复后的完整代码：

<div> <!-- This div is also a flexbox btw -->
    <button id="prevbutton"><h3>Previous</h3></button>
 
    <a href="" id="pagelink" target="_blank"><img src="" height="400px" id="page-holder"></a>
          
    <button id="nextbutton"><h3>Next</h3></button>
</div>

<script>
let pageNumber = 1;
// 抽离基础URL模板，简化后续拼接逻辑
const baseUrl = "https://example.com/Images/Art/Sketchbook Page ";

const pageHolder = document.getElementById('page-holder');
const pageLink = document.getElementById('pagelink');
const nextButton = document.getElementById('nextbutton');
const prevButton = document.getElementById('prevbutton');

// 封装更新页面的通用函数，避免重复代码
function updatePage() {
    const currentPage = `${baseUrl}${pageNumber}.png`;
    pageHolder.src = currentPage;
    pageLink.href = currentPage;
}

// 初始化加载第一页
updatePage();

// 下一页按钮逻辑
nextButton.addEventListener('click', () => {
    pageNumber++;
    updatePage();
});

// 上一页按钮逻辑（加边界判断，防止页码小于1）
prevButton.addEventListener('click', () => {
    if (pageNumber > 1) {
        pageNumber--;
        updatePage();
    }
});
</script>

关键改动说明： #

• 给上一页按钮补充了id，方便JS获取元素
• 把生成URL、更新图片和链接的逻辑封装成updatePage()函数，避免重复编写相同代码
• 给两个按钮绑定点击事件，修改页码后调用updatePage()同步更新DOM
• 上一页按钮增加了边界判断，防止页码变成0或负数（如果有最大页数限制，你也可以在这里添加pageNumber < 最大页码的判断）

关于你提到的w3data.js，只要它在这段代码之前加载，基本不会干扰图片切换功能——两者操作的DOM元素不重叠，逻辑上也没有冲突。

内容的提问来源于stack exchange，提问作者Rook2ii