如何让按钮成功更改URL的部分内容？

Question

我正在尝试创建一个网站，可以使用图像两侧的两个不同按钮在素描本页面的扫描图像之间进行切换。除 URL 中的页码外，所有图像的 URL 均相同。我一直在尝试使用 Javascript 使按钮更改 URL 中的数字以更改图像。

我成功地让 Javascript 在图像的 URL 中提供数字，但是，无论我尝试什么，按钮都拒绝实际更改数字。尽管感觉如此简单的事情应该很容易。

我尝试过各种 if/else 语句。我尝试过 while/do 语句。我尝试过“pageNumber++”和“pageNumber+=1”。我学习了 JQuery 的基础知识，看看它是否有任何帮助，结果却发现它解决的问题并不是我遇到的问题。坦白说，我开始感到非常沮丧。

这是我的设置的基础知识，减去任何按钮功能：

<div> <--! This div is also a flexbox btw -->
    <button><h3>Previous</h3></button> <--! There's nothing happening with this button because I was just trying to figure out the other one first -->
 
    <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;
        
let currentPage = "https://example.com/Images/Art/Sketchbook Page " + pageNumber + ".png";
        
const pageHolder = document.getElementById('page-holder');
const pageLink = document.getElementById('pagelink');
const nextButton = document.getElementById('nextbutton');
        
pageHolder.src = currentPage;
pageLink.href = currentPage;

//Input all of the different button functions I tried here          

</script>

如果有人知道我如何成功做到这一点，我将不胜感激。

顺便说一句，我还使用 http://www.w3schools.com/lib/w3data.js 来帮助在多个站点上拥有相同的 html 片段，而不必单独更新它们，而我不这样做不认为会干扰这个，但我什至不再知道了:(

Answer 1

单击特定元素时，您必须指定“发生什么”。因为你还没有这样做，所以你在这里编写的所有 JS 代码都会在页面加载后立即执行。在这种情况下，您必须将 EventListener 添加到

Previous

和

Next

按钮，并且必须在 callback 函数内编写逻辑。

<div>
    <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;
let imageBaseUrl = "https://example.com/Images/Art/Sketchbook Page ";   

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

previousButton.addEventListener("click", function(){

  if ( pageNumber === 0 ) {
     // You may not need the pageNumber in negative numbers
     return;
  }

  pageNumber--;
  let imageUrl = imageBaseUrl + pageNumber + ".png";
  pageHolder.src = currentPage;
  pageLink.href = currentPage;
});

nextButton.addEventListener("click", function(){
  pageNumber++;
  let imageUrl = imageBaseUrl + pageNumber + ".png";
  pageHolder.src = currentPage;
  pageLink.href = currentPage;
});         

</script>