如何反向一次显示 javascript 个数组项？

Question

我有一个按钮，每次按下都会按从上到下的顺序显示一个数组字符串。我试图找出一种从下到上显示字符串的方法（倒序）。我在下面添加了两个片段来展示我到目前为止所得到的。顶部片段是按正向顺序显示数字的功能按钮，底部片段是我迄今为止尝试反转该功能的方法，但无济于事。需要做什么来告诉函数先显示 888，然后显示 777、666、555，等等？

var textCount = 0;

var oddtext = [
  '111',
  '222',
  '333',
  '444',
  '555',
]
function newThing() {
document.getElementById('thingDisplay').innerHTML = oddtext[textCount];
textCount++;
if (textCount >= oddtext.length) textCount = 0;
}

<div align="center" id='thingDisplay'></div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>

var textCount = 0;

var oddtext = [
  '111',
  '222',
  '333',
  '444',
  '555',
]
function newThing() {
oddtext.reverse();
document.getElementById('thingDisplay').innerHTML = oddtext[textCount];
textCount++;
if (textCount >= oddtext.length) textCount = 0;
}

<div align="center" id='thingDisplay'></div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>

Answer 1

使用它可以避免需要全局 textCount 变量：

const oddtext = ['111', '222', '333', '444', '555', '666', '777', '888'];

const thingDisplay = document.getElementById('thingDisplay');
thingDisplay.innerHTML = oddtext[oddtext.length - 1];

function newThing() {
  const { innerHTML } = thingDisplay;
  const { length } = oddtext;
  const index = ((oddtext.indexOf(innerHTML) - 1) + length) % length;
  thingDisplay.innerHTML = oddtext[index];
}

<div align="center" id='thingDisplay'></div>
    <button class="box" id="button01" onclick="newThing()">New Thing</button>

Answer 2

为了使您的代码正常工作，您应该删除 reverse() 并从数组的长度 -1 一直到 0

var oddtext = [
  '111',
  '222',
  '333',
  '444',
  '555',
  '666',
  '777',
  '888'
]
textCount=oddtext.length-1
function newThing() {
document.getElementById('thingDisplay').innerHTML = oddtext[textCount];
textCount--;
if (textCount<0)  textCount=oddtext.length-1
}

<div align="center" id='thingDisplay'></div>
<button class="box" id="button01" onclick="newThing()">New Thing</button>

或者，如果您想使用反向，则必须从索引 0 到 array.length-1

开始计数

    var oddtext = [
      '111',
      '222',
      '333',
      '444',
      '555',
      '666',
      '777',
      '888'
    ]
    oddtext.reverse()
    var textCount = 0;
    function newThing() {
    document.getElementById('thingDisplay').innerHTML = oddtext[textCount];      
    textCount++;
    if (textCount>oddtext.length-1)  textCount=0
    }

<div align="center" id='thingDisplay'></div>
    <button class="box" id="button01" onclick="newThing()">New Thing</button>

如何反向一次显示 javascript 个数组项？

How to display javascript array items one at a time in reverse?

html

javascript

arrays

reverse

function