Требуется Создавать приветствия автоматически при загрузке

Question

Я не хочу, чтобы кнопка генерировала слова при нажатии. Я хочу, чтобы список переключался по списку слов во время загрузки страницы, как если бы это был короткий анимационный клип! вот что я получил до сих пор

JS

let greeting= () => {
  let hello = ['¡Hola!', 'Ola!', 'Namaste', 'Hello', 'Bonjour','Zdravstvuyte','Nǐn hǎo','Konnichiwa','Anyoung haseyo','Goddag'];


  let name = hello[Math.floor(Math.random() * hello.length)]; 

  if( document.getElementById("name")){
    document.getElementById("placeholder"). removeChild(document.getElementById("name"));
  }
  let element = document.createElement("div");
    element.setAttribute("id", "name");
    element.appendChild(document.createTextNode(name));
  document.getElementById("placeholder").appendChild(element)
  document.getElementById("placeholder").click(element)



}

greeting()

HTML

<section class="bg-dark text-white" onload="greeting()">
    <div id="placeholder" class=" text-center h1 " style="height:fit-content"></div>
   </section>
   <button  type ="button"class ="btn bg-dark text-white btn-block" onclick="greeting()">Press me!</button>

Заранее спасибо!

Answer 1

Чтобы функция запускалась по таймеру, вы можете использовать функцию setInterval, описанную здесь: https://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 2

Вы не можете прикрепить загрузку к div. Обычно onload используется только с тегом body. С учетом сказанного, вы можете просто обернуть таймер и запустить его.

let greeting = () => {
  let hello = ['¡Hola!', 'Ola!', 'Namaste', 'Hello', 'Bonjour','Zdravstvuyte','Nǐn hǎo','Konnichiwa','Anyoung haseyo','Goddag'];


  let name = hello[Math.floor(Math.random() * hello.length)];

  if (document.getElementById("name")){
    document.getElementById("placeholder").removeChild(document.getElementById("name"));
  }
  
  let element = document.createElement("div");
    element.setAttribute("id", "name");
    element.appendChild(document.createTextNode(name));
  document.getElementById("placeholder").appendChild(element)
  document.getElementById("placeholder").click(element)
}

let runGreeting = () => {
 setInterval(greeting, 2000);
};

runGreeting();

<section class="bg-dark text-white">
    <div id="placeholder" class="text-center h1" style="height:fit-content">
      <div id="name"></div>
    </div>
</section>