时间戳

首页 > 解决方案 > 在事件单击时按顺序一一显示数组的元素

javascript - 在事件单击时按顺序一一显示数组的元素

问题描述

我想按顺序在事件点击中一一显示每个项目。默认情况下，它是第一个元素，当单击按钮时，它应该显示第二个，第三个等......当它到达最后一个元素时，它应该再次重复，并且它应该在单击后始终按顺序显示。

var texts = ["one", "two", "three", "four", "five"];

var btn = document.getElementById("myBtn");
btn.addEventListener("click", changeText);
var text = document.getElementById("myText");
text.innerHTML = texts[0];

function changeText(){

	for( var i = 0; i < texts.length; i++ ){
		text.innerHTML = texts[i];
	}
	return;
}
<p id="myText"></p>
<button type="button" id="myBtn">Start</button>

标签： javascript

解决方案

您可以省略 for 循环，因为它迭代到最后并显示最后一项。

取一个全局变量index，并按数组的长度递增和调整，以仅获取数组的有效值。

return顺便说一句，函数末尾的单个语句没有不同的值undefined是不必要的，因为在 Javascript 中返回任何 function undefined，只要它不用作构造函数（与 连接new）。如果从不使用返回的值，则没有必要。

var texts = ["one", "two", "three", "four", "five"],
    btn = document.getElementById("myBtn"),
    text = document.getElementById("myText"),
    index = 0;

btn.addEventListener("click", changeText);
text.innerHTML = texts[0];

function changeText() {
    index++;
    index %= texts.length
    text.innerHTML = texts[index];
}
<p id="myText"></p>
<button type="button" id="myBtn">Start</button>

推荐阅读