javascript - 尝试制作循环通过导航 onclick 的“下一个”和“上一个”按钮

Question

试图在我的导航中制作“下一个”和“上一个”按钮。单击时，他们应该将我带到下一个/上一个 html 文件（网页）。

代码如下所示：

const pages =
["home.html","about.html","skills.html","projects.html","contact.html"];

const currentUrl = window.location.href;
const i = pages.indexOf(currentUrl) 
const arrowUp = document.getElementById("up");
const arrowDown = document.getElementById("down");

function next(){
    i++;

    let goTo = pages[i];

    window.location = goTo;

    if(i===pages.length){
        i = 0;
    }
}

function prev(){
    i--;

    let goTo = pages[i];

    window.location = goTo;

    if(i=0){
        i = pages.length;
    }
}

arrowUp.addEventListener("click",next());

arrowDown.addEventListener("click",prev());

<div id="arrows">
  <a href="#" id="up">
    <i class="far fa-arrow-circle-up"></i>
  </a>
  <a href="#" id="down" class="mbot1">
    <i class="far fa-arrow-circle-down"></i>
  </a>
</div>

是链接问题，因为 href="#"？单击它只需在当前 url 上添加 # （就像没有 js 一样）。

标签： javascripthtml

Answer 1

你i用const. 那就不能重新分配了。使用var或let

var i = pages.indexOf(currentUrl)