Не срабатывает setTimeout в js

225

28 августа 2018, 21:10

Вот этот код в целом не работает.

function headone() { 
  document.getElementById("headone").style.opacity = '1'; 
} 
 
function headtwo() { 
  document.getElementById("headtwo").style.opacity = '1'; 
} 
 
function headthree() { 
  document.getElementById("headthree").style.opacity = '1'; 
} 
 
function head() { 
  headone(); 
  setTimeout(function() { 
    headtwo(); 
    setTimeout(headthree, 1000); 
  }, 1000); 
} 
window.addEventListener("load", headone);

<div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headone">Текст 
</div> 
<div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headtwo">Текст 
</div> 
<div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headthree">Текст 
</div>

Answer 1

Надо не

window.addEventListener("load", headone);

window.addEventListener("load", head);

Молодец, что не сдавался!

Неправильный устаревший ответ:

На странице нет элемента с id="headtwo".

function headone() { 
  document.getElementById("headone").style.opacity = '1'; 
  console.log("headone"); 
} 
 
function headtwo() { 
  document.getElementById("headtwo").style.opacity = '1'; 
  console.log("headtwo"); 
} 
 
function headthree() { 
  document.getElementById("headthree").style.opacity = '1'; 
  console.log("headthree"); 
} 
 
function head() { 
  headone(); 
  setTimeout(function() { 
    headtwo(); 
    setTimeout(headthree, 1000); 
  }, 1000); 
} 
window.addEventListener("load", head)

<div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headone">Текст One 
 </div> 
 <div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headtwo">Текст Two 
 </div> 
 <div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headthree">Текст Three 
 </div>

Answer 2

При наличии на странице элементов с id headone, headtwo, headthree все работает

function headone() { 
  document.getElementById("headone").style.opacity = '1'; 
} 
 
function headtwo() { 
  document.getElementById("headtwo").style.opacity = '1'; 
} 
 
function headthree() { 
  document.getElementById("headthree").style.opacity = '1'; 
} 
 
function head() { 
  headone(); 
  setTimeout(function() { 
    headtwo(); 
    setTimeout(headthree, 1000); 
  }, 1000); 
} 
window.addEventListener("load", head);

<div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headone">Текст 
</div> 
<div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headtwo">Текст 
</div> 
<div style="font-size: 33px; opacity: 0; transition: 4s ease" id="headthree">Текст 
</div>

Update

У вас проблема в этой строке

window.addEventListener("load", headone);

Вы при загрузке страницы вызываете не общую функцию, а функцию отображения первого элемента. Измените ее на

window.addEventListener("load", head);

и все будет работать

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как отправить запрос через прокси для telegram api(не бот), используя nodeJs?

Использую вот эту библиотеку для подключения к API telegram, но когда осуществляется запрос на сервер, вылазит ошибка о том, что невозможно выполнить...

281

javascript

Не выполняется скрипт по нажатию на кнопку

Есть проблема с AJAX подключением и выводом данных JSON , без него кнопка работает по принципу : нажал одни раз - записалась 1 (загорелась зеленым),...

221

javascript

Плагин лупа jquery

подскажите как инициировать отмену плагина jqueryИспользую плагин лупы http://pcvector

250

javascript

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>')

Не могу понять в чем дело

247