Question

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

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>

Answer 1

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

改为使用全局变量index，然后根据数组的长度递增和调整以仅获取数组的有效值。

顺便说一句，在函数末尾的单个return语句没有与undefined不同的值是没有必要的，因为在Javascript中，它返回任何函数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>

Answer 2

您不需要拳头就可以遍历数组的所有元素。如果元素顺序正确，则可以使用当前元素的索引来实现。我们可以使用 indexOf 获取当前元素的索引>数组上的方法。步骤如下：

步骤1。使用 indexOf 方法在数组上获取当前元素的索引。

第2步，将索引增加1。

第3步，检查index是否不是数组的最后一个索引（如果最后一个索引将index设置为0）。

第4步：根据索引从数组中获取元素并在文档中进行设置元件。

这是我的运行代码段：

var texts = ["one", "two", "three", "four", "five"];
 var text=document.getElementById("myText");
var btn = document.getElementById("myBtn");
btn.addEventListener("click", changeText);
 text.innerHTML = texts[0];


    function changeText(){
       var searchTerm =  text.innerHTML  ;
       var index=texts.indexOf(searchTerm)+1;
       if(index == texts.length )index=0;
          var result=texts[index];
          text.innerHTML = result;
    	  return;
       }

<p id="myText"></p>
<button type="button" id="myBtn">Start</button>

Answer 3

这是迭代器的完美境界

var texts = ["one", "two", "three", "four", "five"];
let iterator = textIterator(0);
function* textIterator(idx) {
  while(idx < texts.length) 
      yield idx++;
  iterator = textIterator(1);
  yield 0;
}


var btn = document.getElementById("myBtn");
btn.addEventListener("click", changeText);
var text = document.getElementById("myText");


function changeText(){
  text.innerHTML = texts[iterator.next().value]
}

    <p id="myText"></p>
    <button type="button" id="myBtn">Start</button>

Answer 4

另一种解决方案可能是：

function changeText() {
    text.push(text.innerHTML);
    text.innerHTML = texts.shift();
}

通过push插入div中显示的元素，并通过shift删除数组的第一个元素并将其放入div中。

专业版：如果数组的长度可以更改，则不必担心索引变量。

缺点：与索引变量相比，效果可能会更低

Answer 5

我将提供两种解决方案，因为在您的问题中尚不清楚您一次单击所有这些输出，还是应该在每次单击时打印这些输出，因此我将给出两种解决方案。

**This for printing all value in order on one click:** 



<p id="myText"></p>
     <button type="button" id="myBtn">Start</button>


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];
var counter = 1;
 function changeText(){
       var len = texts.length;
       setInterval(function(){
       if(counter < len){
         console.log(texts[counter]);
         text.innerHTML = texts[counter];
         counter ++;
           }
     }, 500);
   }

<p id="myText"></p>
<button type="button" id="myBtn">Start</button>

变量计数器= 1;

这是用于在每次点击时按顺序打印值：

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];
var counter = 1;
function changeText(){
 var len = texts.length;
 if(counter < len){
   console.log(texts[counter]);
   text.innerHTML = texts[counter];
   counter ++;
 }
}

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

5 个答案: