javascript - 每次点击按钮都更改文本?
问题描述
我想制作这个系统,每次单击按钮时,您都会继续按顺序而不是随机顺序
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]
解决方案
我认为最简单的解决方案是每次单击按钮后递增,然后将当前索引设为
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>
推荐阅读
- javascript - 用玩笑模拟高阶组件
- javascript - 流:传入的对象与相交类型不匹配
- d3.js - 在 Vegalite 图上指定纵横比/等比例
- javascript - 点击 TouchableOpacity onPress 时旋转图标
- reactjs - ReactJS Material UI withStyles incl。TS中的主题
- apache - URL 重写 http > https AND domain.tld > www.domain.tld
- javascript - html2Canvas 下载很模糊,我怎样才能让它更清晰
- coldfusion - ColdFusion 通过 Java 做 OWASP esapi
- amazon-web-services - 在 golang 中订阅 SNS 主题和/或 SQS 队列?
- android - Android Studio 的奇怪行为,一些文件看起来与实际不同