如何实现点击按钮按固定顺序切换文本，而非直接展示数组最后一项

问题分析 #

现有代码的buttOn函数每次触发时，会连续对同一个DOM节点的innerHTML属性执行3次赋值，后一次赋值会直接覆盖前一次的结果，因此每次点击结束只会显示数组最后一项的内容。

解决方法 #

新增全局索引变量记录当前展示的数组下标，每次点击按钮后更新索引，再根据索引获取对应文本渲染，示例代码如下：

JavaScript 代码 #

const stn = [`Hi`, `Hey`, `Hello`]
// 初始化当前展示下标，初始值为-1保证第一次点击拿到第0项内容
let currentIndex = -1

function buttOn() {
    // 下标自增，超出数组长度时自动取模重置到0，实现循环切换
    currentIndex = (currentIndex + 1) % stn.length
    document.getElementById('txt').innerHTML = stn[currentIndex]
}

HTML 代码（原有代码无需修改） #

<body>
    <p id="txt"></p>
    <br>
    <button id="buttOn" onclick="buttOn()">Click Me!</button>
</body>

如果需要页面首次加载就默认显示第一项内容，可以把currentIndex初始值设为0，在全局作用域额外加一行代码执行首次赋值即可：

document.getElementById('txt').innerHTML = stn[currentIndex]

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