Task 1. Every second in the visible area appear squares with the corresponding numbers. Task 2. When the number 5 appears, everything starts over.

setTimeout(function (){ var block = document.getElementsByTagName('li'); for(i=0; i < block[i].length; i++) { block[0].style.display = 'block'; } i++; },1000) 
 ul { border: 1px solid #000; width: 50px; height: 50px; padding-left: 0; } li { width: 50px; height: 50px; border: 1px solid #000; text-align: center; list-style-type: none; display: none; } 
 <ul> <li class="block">1</li> <li class="block">2</li> <li class="block">3</li> <li class="block">4</li> <li class="block">5</li> </ul>

  • Read some javascript basics tutorial. To begin with, you are trying to use a non-existent variable i . If it is assumed that it exists, block[i] returns an HTML element, and the HTML element does not have a length property. - andreymal

2 answers 2

I would do this:

 const blocks = Array.from(document.getElementsByTagName('li')); function callBlock(i) { if(i <= blocks.length - 1) { blocks[i].style.display = 'flex'; setTimeout(()=> { callBlock(++i); },1000) } else { for(let el of blocks) { el.style.display = 'none'; } setTimeout(()=> { i = 0; callBlock(i); },1000) } } callBlock(0); 
 ul { height: 50px; padding-left: 0; display: flex; } .block { width: 50px; height: 50px; border: 1px solid #000; text-align: center; list-style-type: none; display: none; align-items: center; justify-content: center; } 
 <ul> <li class="block">1</li> <li class="block">2</li> <li class="block">3</li> <li class="block">4</li> <li class="block">5</li> </ul> 

     function showNext(index) { var blocks = document.getElementsByTagName('li'); if (index >= blocks.length) { for (var i = 0; i < blocks.length; i++) { blocks[i].style.display = 'none'; } index = 0; } else { blocks[index].style.display = 'block'; index++; } setTimeout(showNext, 1000, index); } setTimeout(showNext, 1000, 0); 
     ul { border: 1px solid #000; width: 50px; height: 50px; padding-left: 0; } li { width: 50px; height: 50px; border: 1px solid #000; text-align: center; list-style-type: none; display: none; } 
     <ul> <li class="block">1</li> <li class="block">2</li> <li class="block">3</li> <li class="block">4</li> <li class="block">5</li> </ul>