JavaScript字符串生成器的“下一步”和“上一步”按钮

我有一个文本生成器，用户可以在其中选择在字符串数组中运行的方向。无论你走哪条路，它总是绕着起点转

我已经找到了一种用不同的按钮来改变数组方向的方法，但是现在在反转任何方向的过程中都会出现问题。前进后单击后退按钮（visa国际组织也一样），过程会延迟。在以正确的方向穿过阵列之前，它将以错误的方向移动一个项目。为了清晰起见，请尝试下面的代码片段

var-oddprocess=[
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
];
//变数
var-processFor=0；
var反因子=0；
函数prevProc（）{
document.getElementById（'display'）.innerHTML=oddprocess[processFor]；
处理--；
if（processFor<0）processFor=oddprocess.length-1；
//柜台
document.getElementById（'counter'）.innerHTML=（counter+'/'++（oddprocess.length-1））；
反对者--；
如果（反作用力<0），反作用力=0.1.1长度-1；
}
document.getElementById（'button02'）。addEventListener（'click'，prevProc）；
函数nextProc（）{
document.getElementById（'display'）.innerHTML=oddprocess[processFor]；
processFor++；
如果（processFor>=oddprocess.length）processFor=0；
//柜台
document.getElementById（'counter'）.innerHTML=（counter+'/'++（oddprocess.length-1））；
计数器++；
如果（counterFor>=oddprocess.length）counterFor=0；
}
document.getElementById（'button01'）。addEventListener（'click'，nextProc）

返回
Forth
您只需要一个变量来跟踪
currentIndex
，该变量可用于检索字符串和在计数器中显示。在检索要显示的新字符串之前，还需要递增或递减索引变量

通过在添加侦听器之前存储相关元素，您还可以在每次单击时查询DOM


var-oddprocess=[
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
];
//变数
const display=document.getElementById（'display'）；
常量计数器=document.getElementById（'counter'）；
设currentIndex=0；
函数prevProc（）{
当前索引--；
如果（currentIndex<0）currentIndex=oddprocess.length-1；
display.innerHTML=oddprocess[currentIndex]；
//柜台
counter.innerHTML=（currentIndex+'/'+（oddprocess.length-1））；
}
document.getElementById（'button02'）。addEventListener（'click'，prevProc）；
函数nextProc（）{
currentIndex++；
如果（currentIndex>=oddprocess.length）currentIndex=0；
display.innerHTML=oddprocess[currentIndex]；
//柜台
document.getElementById（'counter'）.innerHTML=（currentIndex++'/'++（oddprocess.length-1））；
}
document.getElementById（'button01'）。addEventListener（'click'，nextProc）

返回
第四，这是因为在更改
processFor
的值之前，您更改了
文档.getElementById（'display'）.innerHTML

看一下下面的代码，这些代码实现了您想要实现的目标


const DISPLAY=document.getElementById（“显示”）
常量计数器=document.getElementById（“计数器”）
const PREV=document.getElementById（“PREV”）
const NEXT=document.getElementById（“NEXT”）
常量数据=[1,2,3,4,5,6,7,8,9,10]
设指针=0；//指针的初始值
函数displayCurrentValue（）{
DISPLAY.innerHTML=数据[指针]；
}
函数renderCounter（）{
常量文本=`${pointer+1}/${data.length}`
COUNTER.innerHTML=文本
}
//运行它以呈现初始状态
displayCurrentValue（）
renderCounter（）
上一个addEventListener（“单击”，（）=>{
指针--//首先更改状态（指针）
如果（指针<0）指针=data.length-1
displayCurrentValue（）//然后对其进行操作
renderCounter（）
})
NEXT.addEventListener（“单击”，（）=>{
指针++//首先更改状态（指针）
如果（指针>=data.length）指针=0
displayCurrentValue（）//然后对其进行操作
renderCounter（）
})

上
接下来
我建议简化您的脚本，并使用相同的脚本处理两个按钮。根据按钮文本，单击将增加或减少当前显示元素的索引：


var oddprocess='0,1,2,3,4,5,6,7,8,9'。拆分（'，'），
opl=oddprocess.length；
//变数
var processFor=-1，
disp=document.getElementById（'display'），
cntr=document.getElementById（'counter'）；
功能步骤（ev）{
if（ev.target.tagName==“按钮”）{
让inc=（ev.target.textContent=“Back”？-1:1）；
processFor=（processFor+inc+opl）%opl；
disp.innerHTML=oddprocess[processFor]；
cntr.innerHTML=processFor+'/'+（opl-1）；
}}
document.addEventListener（'单击'，步骤）
步骤（{目标：{标记名：“按钮”}}）
按钮，span{font-weight:900}

返回
Forth