Элемент div не меняет текстовое содержимое

Question

В файле CSS есть текст, и я хочу изменить текстовое содержимое div элемент динамически (сначала показывая первый текст, затем второй и т. д.), и проблема в том, что, хотя я вижу, что console.log(message[i].text) имеет текст (т.е."Insert the FIRST text you want." так далее.), document.getElementById("background").innerHTML = message[i].text; все еще пусто

Это файл CSS:

const message = [
    {
        "text":"Insert the FIRST text you want."
    },
    {
        "text":"Insert the SECOND text you want."
    },
    {
        "text":"Insert the THIRD text you want."
    },
    {
        "text":"Insert the FOURTH text you want."
    },
    {
        "text":"Insert the FIFTH text you want."
    },
    {
        "text":"Insert the SIXTH text you want."
    },
  {
        "text":"Insert the SEVENTH text you want."
    },
  {
        "text":"Insert the EIGHTH text you want w this is just to test the words w ww www."
    }
]

Это функция js:

function insertText(a, b){
  (function theLoop (i) {
    setTimeout(function () {
      document.getElementById("background").innerHTML = message[i].text;
      if (i++ < b-1) {    
        theLoop(i);       
      }
      else {
        i = a;
        //theLoop(i);
      }
    }, delayValue);
  })(a, b);
}

И вот как я это называю:

var l = message.length; 
insertText(0, l);

Я уверен, что это что-то легкое, но я не могу понять это. Большое спасибо.

Answer 1

Поскольку вы не предоставили подробности вопроса, такие как HTML, ошибка, которую вы получаете (если таковые имеются), действительно трудно ответить на вопрос.

Хотя я смог начать работу с вашим кодом, добавив один HTML элемент и установка значения для delayValue в setTimeout(),

Попробуйте следующее:

const message = [
    {
      "text":"Insert the FIRST text you want."
    },
    {
      "text":"Insert the SECOND text you want."
    },
    {
      "text":"Insert the THIRD text you want."
    },
    {
      "text":"Insert the FOURTH text you want."
    },
    {
      "text":"Insert the FIFTH text you want."
    },
    {
      "text":"Insert the SIXTH text you want."
    },
    {
      "text":"Insert the SEVENTH text you want."
    },
    {
      "text":"Insert the EIGHTH text you want w this is just to test the words w ww www."
    }
]


function insertText(a, b){
  (function theLoop (i) {
    var delayValue = 1000;
    setTimeout(function () {
      document.getElementById("background").innerHTML = message[i].text;
      if (i++ < b-1) {    
        theLoop(i);       
      }
      else {
        i = a;
        //theLoop(i);
      }
    }, delayValue);
  })(a, b);
} 
var l = message.length; 
insertText(0, l);

<div id="background"></div>