首页 > 解决方案 > 每次点击按钮都更改文本?

问题描述

我想制作这个系统,每次单击按钮时,您都会继续按顺序而不是随机顺序

const stn = [`Hi`, `Hey`, `Hello`]
            //  0         1       2

function buttOn() {
    document.getElementById('txt').innerHTML = stn[0]
    document.getElementById('txt').innerHTML = stn[1]
    document.getElementById('txt').innerHTML = stn[2]
}
<body>
    <p id="txt"></p>
    <br>
    <button id="buttOn" onclick="buttOn()">Click Me!</button>
</body>

这就是我得到的,但我似乎无法让它停在 stn[0] 并且它只是去最后一个是 stn[2]

标签: javascripthtml

解决方案


我认为最简单的解决方案是每次单击按钮后递增,然后将当前索引设为

index = index % stn.length;

const stn = [`Hi`, `Hey`, `Hello`]
//  0         1       2
let index = 0;

function buttOn() {
  document.getElementById('txt').innerHTML = stn[index++];
  index = index % stn.length;
}
<p id="txt"></p>
<br>
<button id="buttOn" onclick="buttOn()">Click Me!</button>


推荐阅读