JavaScript 字符串生成器的下一个和上一个按钮

Question

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

我已经找到了一种使用不同按钮更改数组方向的方法，但是现在将过程反转到任一方向都会出现问题。在前进后单击反向按钮（反之亦然）时，该过程会出现延迟。在以正确方向移动穿过阵列之前，它将向错误方向移动一项。为了清楚起见，请尝试下面的 sn-p。

var oddprocess = [
    '0',
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
];


//variables
var processFor = 0;
var counterFor = 0;

function prevProc() {
    document.getElementById('display').innerHTML = oddprocess[processFor];
    processFor--;
    if(processFor < 0) processFor = oddprocess.length - 1;
    //counter
    document.getElementById('counter').innerHTML = (counterFor + '&nbsp;/&nbsp;' + (oddprocess.length - 1));
    counterFor--;
    if(counterFor < 0) counterFor = oddprocess.length - 1;
}
document.getElementById('button02').addEventListener('click', prevProc);


function nextProc() {
    document.getElementById('display').innerHTML = oddprocess[processFor];
    processFor++;
    if(processFor >= oddprocess.length) processFor = 0;
    //counter
    document.getElementById('counter').innerHTML = (counterFor + '&nbsp;/&nbsp;' + (oddprocess.length - 1));
    counterFor++;
    if(counterFor >= oddprocess.length) counterFor = 0;
}
document.getElementById('button01').addEventListener('click', nextProc);

<div class="center" id='display'></div>

<button id="button02"><b>Back</b></button>
<b><font style="color:#000;" id="counter"></font></b>
<button id="button01"><b>Forth</b></button>

如何更改我的代码，以便按下任一按钮会立即反转方向？

Answer 1

您只需要一个变量来跟踪currentIndex，它可用于检索字符串并显示在计数器中。在检索要显示的新字符串之前，您还需要增加或减少索引变量。

您还可以通过在添加侦听器之前存储相关元素来节省每次点击时查询 DOM。

var oddprocess = [
    '0',
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
];


//variables
const display = document.getElementById('display');
const counter = document.getElementById('counter');

let currentIndex = 0;

function prevProc() {
    currentIndex--;
    if(currentIndex < 0) currentIndex = oddprocess.length - 1;
    
    display.innerHTML = oddprocess[currentIndex];
    //counter
    counter.innerHTML = (currentIndex + '&nbsp;/&nbsp;' + (oddprocess.length - 1));
}
document.getElementById('button02').addEventListener('click', prevProc);


function nextProc() {
    currentIndex++;
    if(currentIndex >= oddprocess.length) currentIndex = 0;
    
    display.innerHTML = oddprocess[currentIndex];
    //counter
    document.getElementById('counter').innerHTML = (currentIndex + '&nbsp;/&nbsp;' + (oddprocess.length - 1));
}
document.getElementById('button01').addEventListener('click', nextProc);

<div class="center" id='display'></div>

<button id="button02"><b>Back</b></button>
<b><font style="color:#000;" id="counter"></font></b>
<button id="button01"><b>Forth</b></button>

Answer 2

这是因为您在更改processFor 的值之前更改了document.getElementById('display').innerHTML。

看看下面的代码，它可以实现你想要实现的目标。

const DISPLAY = document.getElementById("display")
const COUNTER = document.getElementById("counter")
const PREV = document.getElementById("prev")
const NEXT = document.getElementById("next")

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let pointer = 0; // initial value of the pointer

function displayCurrentValue() {
    DISPLAY.innerHTML = data[pointer];
}

function renderCounter() {
    const text = `${pointer + 1}/${data.length}`
  COUNTER.innerHTML = text
}

// run it to render the initial state
displayCurrentValue()
renderCounter()

PREV.addEventListener("click", () => {
    pointer-- // first change the state (pointer)
  if (pointer < 0) pointer = data.length - 1
  displayCurrentValue() // then act on it
  renderCounter()
})

NEXT.addEventListener("click", () => {
    pointer++ // first change the state (pointer)
  if (pointer >= data.length) pointer = 0
  displayCurrentValue() // then act on it
  renderCounter()
})

<div id="display"></div>

<button id="prev">prev</button>
<span id="counter"></span>
<button id="next">next</button>

Answer 3

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

var oddprocess = 'zero,one,two,three,four,five,six,seven,eight,nine'.split(','),       
    opl=oddprocess.length;
//variables
var processFor = -1,
    disp=document.getElementById('display'),
    cntr=document.getElementById('counter');

function step(ev) {
    if (ev.target.tagName=="BUTTON"){
      let inc=(ev.target.textContent=="Back"?-1:1);
      processFor=(processFor+inc+opl)%opl;
      disp.innerHTML = oddprocess[processFor];
      cntr.innerHTML = processFor + ' / ' + (opl - 1);
}}
document.addEventListener('click',step)
step({target:{tagName:"BUTTON"}});

button, span {font-weight:900}

<div class="center" id="display"></div>

<button>Back</button>
<span id="counter"></span>
<button>Forth</button>