Loop is only displaying the last string in an array when adding it a span tag

Question

I want to change the word in the span tag every 1.5 seconds but so far it is just displaying the last word in the array 'list'.

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>

Because you run the full for loop in a single setInterval call. The for loop is not paused between setInterval calls — Patrick Evans, Mar 04 '17 at 12:35
You don't want a loop....it will run every time the interval is triggered. So same loop runs every time producing same result every time — charlietfl, Mar 04 '17 at 12:36
But when I remove setInterval and just have the for loop it does the same thing.. — Jake123, Mar 04 '17 at 12:39

score 2 · Accepted Answer · edited May 23 '17 at 12:32

You don't need a for loop, just use that setInterval, your counter or even simpler using Array manipulation:

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 want to not use a counter but do it using array manipulation:

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>

P.S: The inverse would be using list.unshift(list.pop()) as you can see here.

Performance-wise the solution using counter should be faster but you have a small Array so the difference should not raise any concerns.

@Jake123 I've added also a (proper) way to do it using Array manipulation if you're interested - instead of using `counter`. You're welcome. Happy coding — Roko C. Buljan, Mar 04 '17 at 13:03
Okay thank you for that, just another question is there a way to get each word to fade in? — Jake123, Mar 04 '17 at 20:26
@Jake123 sure, you can toggle a class from your element... a nicer way using jQuery can be found here: http://stackoverflow.com/questions/20695877/how-to-fade-animate-and-change-text-word-in-title-sentence — Roko C. Buljan, Mar 04 '17 at 21:55

score 0 · Answer 2 · answered Mar 04 '17 at 12:39

You may wanna try this. Not looping, just calling a changeWord function every 1.5 sec.

    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>

KooiInc · Answer 3 · 2017-03-04T16:29:25.973

Better use setTimeout. Every 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>

score 0 · Answer 4 · answered Mar 04 '17 at 15:46

I would do this job by setTimeout() 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>

score -1 · Answer 5 · answered Mar 04 '17 at 12:58

The problem with your code is whenever your interval function is called,loop get executed and prints the element because you are replacing the whole innerHtml on each iteration. You can try the following code if u want to print whole list element again and again after interval.

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

The 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);

Loop is only displaying the last string in an array when adding it a span tag

5 Answers5