JavaScript如何实现点击按钮按顺序逐个输出排序后数组的元素

要实现按升序顺序逐个输出数组元素，只需调整代码存储排序后的数组和当前读取的位置索引即可，修改逻辑如下：

• 提前对数组做升序排序，注意数组元素为字符串格式，排序时转为数字比较可避免字符串排序的逻辑误差
• 在点击事件外定义索引变量，记录下一次要读取的数组位置，避免每次点击重置状态
• 每次点击时读取当前索引的元素，写入文本框后索引自增，可按需配置超过数组长度后是循环回到开头还是终止输出

完整修改后代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="pr" id="pr"></textarea>
<br>
<input type="button" id="okok" value="Start">

<script>
// 定义数组并做升序排序
const myArray = ["5", "8", "7", "2"].sort((a, b) => Number(a) - Number(b));
// 定义当前读取索引，初始值为0
let currentIndex = 0;

$(document).on("click", "#okok", function() {
  const nilai = document.getElementById("pr");
  // 读取当前索引对应的元素
  const currentItem = myArray[currentIndex];
  nilai.value = currentItem;
  // 索引自增，取余实现循环输出，不需要循环可替换为下方注释的逻辑
  currentIndex = (currentIndex + 1) % myArray.length;
  
  // 不需要循环的逻辑：遍历完所有元素后不再更新
  // if (currentIndex < myArray.length - 1) {
  //   currentIndex++;
  // }
});
</script>

原代码中重复引用了两个版本的jQuery，上述代码已经删除了多余的1.10.2版本引用，不影响功能正常运行。

内容的提问来源于stack exchange，提问作者yagami cell