极客教程JavaScript 如何创建上一个和下一个按钮以及不工作的端部位置
有很多方法可以使用JavaScript创建上一个和下一个按钮以及不工作的端部位置。我们将介绍两种方法来实现这一功能–一种是使用正常的if条件，另一种是使用 “disabled “属性。第二种方法是利用 “disabled “属性使按钮不能被点击，并为非工作端位置更新按钮样式。通过实现这些技术，我们可以轻松地浏览一组元素，使用户体验更加无缝和直观。
让我们通过实例来看看这两种方法在JavaScript中创建这种按钮的情况。
只使用if条件
我们将创建两个按钮，”prev “和 “next”，带有点击事件监听器，用一个变量跟踪当前位置。当按钮被点击时，它将更新当前位置并调用一个函数来更新用户界面。这个方法将通过使用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
}
我们通过应用简单的if条件，使上一个和下一个按钮在末端位置不工作。
方法
在这个方法中，我们遵循下面的步骤
第1步 - 创建一个有两个按钮的HTML页面，”prev “和 “next”，以及一个id为 “content “的空div。
第2步 --定义一个currentPosition变量并将其设置为0。
第3步–定义一个maxPosition变量，并将其设置为元素的最大数量。
第4步 --在 “prev “按钮上添加一个点击事件监听器。
第4.1步 - 在 “prev “按钮的点击事件监听器中，检查currentPosition是否大于0，如果是，将currentPosition递减1并调用updateContent( ) 函数。
第5步 - 为 “下一个 “按钮添加一个点击事件监听器。
第5.1步 - 在 “下一个 “按钮的点击事件监听器中，检查currentPosition是否小于maxPosition。如果是，将currentPosition增加1，并调用updateContent( ) 函数。
第6步 --创建一个函数updateContent( )来更新用户界面或进行API调用。
第6.1步 –在updateContent( )函数中，用currentPosition的值更新 “content “div的innerHTML。
例子
在下面的例子中，我们正在创建两个按钮，”prev “和 “next”，并带有点击事件监听器；我们将执行一个适当的操作，并根据用户点击任何按钮后currentPosition值的变化来更新用户界面。
<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时不工作。
// To disable the prev button
document.getElementById("prevBtn").disabled = true;
// To disable next button
document.getElementById("nextBtn").disabled = true;
将disabled属性设置为 “真 “可以使按钮不能被点击。我们将在末端位置为上一个和下一个按钮设置真值，使它们不能被点击。
例子
在下面的例子中， “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 “属性来使按钮不能被点击，并为不工作的终端位置更新按钮样式。