Geek Answers Handbook

Loop only displays the last line in the array when adding a span tag

I want to change the word in the span tag every 1.5 seconds, but for now it just displays the last word in the list of arrays.

Here is my javascript

var list = [ "websites", "user interfaces" ]; setInterval(function() { for(var count = 0; count < list.length; count++) { document.getElementById("word").innerHTML = list[count]; }}, 1500);

And here is the html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="word"></span> </body> </html>
+7
javascript arrays html loops for-loop
source share
5 answers

You don't need a for loop, just use setInterval , your counter or even simpler by manipulating the array:

 var list = [ "websites", "user interfaces", "cool neh?" ]; var count = 0; // Separate your count function changeWord() { // Separate your concerns document.getElementById("word").innerHTML = list[count]; count = ++count % list.length; // Increment and loop counter } changeWord(); // First run, setInterval(changeWord, 1500); // Subsequent loops 
 <span id="word"></span>

If you do not want to use counter , but do it with an array :

 var list = [ "websites", "user interfaces", "cool neh?" ]; var ELWord = document.getElementById("word"); // Cache elements you use often function changeWord() { ELWord.innerHTML = list[0]; // Use always the first key. list.push(list.shift()); // Push the first key to the end of list. } changeWord(); setInterval(changeWord, 1500); 
 <span id="word"></span>

PS: The reverse will use list.unshift(list.pop()) , as you can see here .

An effective solution using counter should be faster, but you have a small array, so the difference should not cause any problems.

+2
source share

You can try this. Not looping, just calling the changeWord function every 1.5 seconds.

  var list = [ "websites", "user interfaces" ]; var count = 0; function changeWord() { document.getElementById("word").innerHTML = list[count]; count = count < list.length-1 ? count+1 : 0; } setInterval(function() { changeWord(); }, 1500); 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="word"></span> </body> </html>
0
source share

Better to use setTimeout . Each iteration should have its own timeout. see also

 (() => { const words = document.querySelector('#words'); typeWords([ "web sites", "user interfaces", "rare items", "other stuff", "lizard sites", "ftp sites", "makebelief sites", "fake news sites", "et cetera" ]); function typeWords(list) { list.push(list.shift()) && (words.innerHTML = list[list.length-1]); setTimeout(() => typeWords(list), 1500); } })(); 
 <div id="words"></div>
0
source share

I would do this setTimeout() job as follows,

 function loopTextContent(a, el, dur = 1500){ var i = -1, len = a.length, STID = 0, looper = _ => (el.textContent = a[i = ++i%len], STID = setTimeout(looper,dur)); looper(); return _ => STID; } var list = ["websites", "user interfaces", "user experience", "whatever"], getSTID = loopTextContent(list, document.getElementById("word")); setTimeout(_ => clearTimeout(getSTID()),10000); 
 <span id="word"></span>
0
source share

A problem with your code occurs whenever you call the interval function, the get loop executes and prints the element, because you replace the entire innerHtml at each iteration. You can try the following code if you want to print the entire list item again and again after the interval.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="word"></span> </body>

Javascript code:

  var list = [ "websites", "user interfaces" ]; var count=0; function print() { document.getElementById("word").innerHTML = list[count]; count += 1; count%=list.length; } setInterval( print(), 1000);
-one
source share

More articles:


All Articles