下一个和上一个按钮 javascript答案

【问题标题】：Next and previous buttons javascript下一个和上一个按钮 javascript
【发布时间】：2019-12-19 14:48:28
【问题描述】：

我想在用户单击下一个或上一个按钮并且它已经位于数组的第一个或最后一个元素时得到警报

function myFunction() {
    document.getElementById("f").value = person[arr].fname;
    document.getElementById("l").value = person[arr].lname;
    document.getElementById("a").value = person[arr].age;
    document.getElementById("s").value = person[arr].salary;
}

document.getElementById("prevbtn").addEventListener("click", myFunctionPrev);
document.getElementById("nxtbtn").addEventListener("click", myFunctionNext);


function myFunctionPrev() {
    if (arr > 0) {
        arr -= 1;
    }

    myFunction();
}



function myFunctionNext() {
    if (arr < 3) {
        arr += 1;
    }

    myFunction();
}

【问题讨论】：

第一个是arr == 0 最后一个是arr == person.length - 1 或者你已经硬编码了值arr == 3

标签： javascript

【解决方案1】：

通过“获取警报”，我不完全了解您的期望，但提醒用户无法越过限制的一种好方法是禁用按钮。

这里是一个例子。

var person = [{
        fname: "1",
        lname: "1",
        age: "1",
        salary: "1"
    }, {
        fname: "2",
        lname: "2",
        age: "2",
        salary: "2"
    },
    {
        fname: "3",
        lname: "3",
        age: "3",
        salary: "3"
    }];

var index = 0;
document.getElementById("prevbtn").addEventListener("click", myFunctionPrev);
document.getElementById("nxtbtn").addEventListener("click", myFunctionNext);
myFunction();

function myFunction() {
    document.getElementById("f").innerHTML = person[index].fname;
    document.getElementById("l").innerHTML = person[index].lname;
    document.getElementById("a").innerHTML = person[index].age;
    document.getElementById("s").innerHTML = person[index].salary;
    checkButtonStatus();
}

function checkButtonStatus() {
    document.getElementById("prevbtn").disabled = index <= 0;
    document.getElementById("nxtbtn").disabled = index >= person.length - 1;
}

function myFunctionPrev() {
    if (index > 0) {
        index -= 1;
    }

    myFunction();
}


function myFunctionNext() {
    if (index < person.length) {
        index += 1;
    }

    myFunction();
}

<div>
    <div>
        <div id="f"></div>
        <div id="l"></div>
        <div id="a"></div>
        <div id="s"></div>
    </div>
    <div>
        <button id="prevbtn">Prev</button>
        <button id="nxtbtn">Next</button>
    </div>
</div>

如果您愿意，可以将启用/禁用功能替换为您需要的警报。

【讨论】：