极客笔记如何使用JavaScript创建上一个和下一个按钮，并在末尾位置时使其不可点击
使用JavaScript可以通过多种方式创建上一个和下一个按钮，并使其在末尾位置时不可点击。我们将介绍两种方法来实现这个功能-一种使用普通的if条件，另一种使用”disabled”属性。第二种方法利用”disabled”属性使按钮不可点击，并为不可用的末尾位置更新按钮样式。通过实现这些技术，我们可以轻松地在一组元素中导航，使用户体验更流畅和直观。
让我们来看看使用JavaScript创建此类型按钮的两种方法及其示例。
仅使用if条件
我们将创建两个按钮“prev”和“next”，并为其添加点击事件监听器，并使用一个变量来跟踪当前位置。在按钮点击时，它会更新当前位置并调用一个函数来更新UI。通过使用if条件，此方法可以使按钮功能正常工作并在需要时使其不可用。
语法
用户可以按照下面的语法创建不在末尾位置时不工作的上一个和下一个按钮。
// for prev button
if (currentPosition > 0) {
currentPosition--;
updateContent() ;
}
// for next button
if (currentPosition < maxPosition) {
currentPosition++;
updateContent();
}
function updateContent() {
// update UI or make API call here
}
我们通过应用简单的条件语句，在结束位置使上一页和下一页按钮无法使用。
方法
在这种方法中，我们遵循以下步骤：
步骤1 - 创建一个带有两个按钮“prev”和“next”的HTML页面，并在id为“content”的空div元素中。
步骤2 - 定义一个currentPosition变量并将其设置为0。
步骤3 - 定义一个maxPosition变量，并将其设置为元素的最大数量。
步骤4 - 给“prev”按钮添加一个点击事件监听器。
步骤4.1 - 在“prev”按钮的点击事件监听器中，检查currentPosition是否大于0。如果是，将currentPosition减1，并调用updateContent()函数。
步骤5 - 给“next”按钮添加一个点击事件监听器。
步骤5.1 - 在“next”按钮的点击事件监听器中，检查currentPosition是否小于maxPosition。如果是，将currentPosition加1，并调用updateContent()函数。
步骤6 - 创建一个名为updateContent()的函数，用于更新UI或进行API调用。
步骤6.1 - 在updateContent()函数中，使用currentPosition的值更新“content” div的innerHTML内容。
示例
在下面的示例中，我们创建了两个按钮“prev”和“next”，并添加了点击事件监听器；在用户点击任何按钮后，我们将根据currentPosition的值的变化执行适当的操作，并根据其更新UI。
<html>
<head>
<title>Previous and Next Buttons: non-working on end positions</title>
</head>
<body>
<div id = "content" ></div>
<button id = "prev" > Previous </button>
<button id = "next" > Next </button>
<script>
var currentPosition = 0;
var maxPosition = 10;
updateContent();
document.getElementById("prev").addEventListener("click", function() {
if (currentPosition > 0) {
currentPosition--;
updateContent() ;
}
});
document.getElementById("next").addEventListener("click", function() {
if (currentPosition < maxPosition) {
currentPosition++;
updateContent() ;
}
});
function updateContent(){
// update UI or make API call here
var content = document.getElementById("content");
content.innerHTML = "Current Position: " + currentPosition + "<br> <br>" ;
}
</script>
</body>
</html>
用户可以在我们的在线JavaScript编辑器中检查输出，以查看这些按钮的功能。
使用disabled属性
我们可以使用“disabled”属性来实现同样的功能。它用于使按钮无法使用或不可点击。使用“disabled”属性，我们将在按钮位于末尾位置时禁用按钮。在此，我们将更新非工作结束位置的按钮样式。
语法
用户可以按照以下语法创建上一个和下一个按钮，并使用disabled属性在结束位置无法使用。
// To disable the prev button
document.getElementById("prevBtn").disabled = true;
// To disable next button
document.getElementById("nextBtn").disabled = true;
将disabled属性设置为true会使按钮不可点击。我们将在最后位置为上一个和下一个按钮设置为true值，使它们不可点击。
示例
在下面的示例中，“disabled”用于“prevBtn”和“nextBtn”按钮，以防止用户在达到列表的开头或结尾时点击它们。当点击“prevBtn”并且当前位置位于列表的开头时，按钮的disabled属性设置为true，使其不可点击。类似地，当点击“nextBtn”并且当前位置位于列表的末尾时，按钮的disabled属性设置为true，使其不可点击。这用于防止用户超过列表的第一个和最后一个元素。
<html>
<head>
<title>Previous and Next Buttons: non-working on end positions</title>
</head>
<body>
<div id = "content" > </div>
<button id="prevBtn" disabled > Previous </button>
<button id = "nextBtn" >Next </button>
<script>
let maxItem = 10;
let currentItem = 0;
prevBtn.style.backgroundColor = "red";
updateContent();
document.getElementById("prevBtn").addEventListener("click", function() {
if(currentItem > 0) {
currentItem--;
document.getElementById("nextBtn").disabled = false;
nextBtn.style.backgroundColor = "";
}
if(currentItem === 0) {
this.disabled = true;
prevBtn.style.backgroundColor = "red";
}
updateContent() ;
});
document.getElementById("nextBtn").addEventListener("click", function() {
if(currentItem < maxItem) {
currentItem++;
document.getElementById("prevBtn").disabled = false;
prevBtn.style.backgroundColor = "";
}
if(currentItem === maxItem) {
this.disabled = true;
nextBtn.style.backgroundColor = "red";
}
updateContent() ;
});
function updateContent() {
// update UI or make API call here
var content = document.getElementById("content");
content.innerHTML = "Current Item: " + currentItem + "<br><br>";
}
</script>
</body>
</html>
用户可以在我们的在线JavaScript编辑器上检查输出，以查看这些按钮和颜色如何根据其位置而改变。
我们学习了使用JavaScript创建上一页和下一页按钮的两种不同方法。第一种方法涉及简单的if条件。相反，第二种方法利用“disabled”属性使按钮不可点击，并针对不可用的结束位置更新按钮样式。