Почему атрибут hidden не присваивается?

Question

Задание: Написать код, который выведет текст по буквам, а затем весь текст должен разом исчезнуть.

код выводит текст по буквам, но вот присваивание атрибута hidden почему-то не работает.

html:

<h1 id="h1">
    <span hidden>H</span><span hidden>E</span><span hidden>L</span><span hidden>L</span><span hidden>O <><br><span hidden>W</span><span hidden>O</span><span hidden>R</span><span hidden>L</span><span hidden>D</span>
</h1>

js:

for(let i = 0; i < spans.length; i++) {
    setTimeout(() => spans[i].removeAttribute('hidden'), 200*i);
}

for(let i = 0; i < spans.length; i++) {
    spans[i].setAttribute('hidden', 'hidden');
}

Answer 1

Так?

const spans = document.querySelectorAll('#h1 > span');

for(let i = 0; i <= spans.length; i++) {
  if(i < spans.length)
    setTimeout(function () {
      spans[i].removeAttribute('hidden');
    }, i * 200);
  else {
    setTimeout(function() {
      spans.forEach(function(e) {
        e.setAttribute('hidden', 'hidden');
      });
    }, i * 200 + 500);
  }
}

<h1 id="h1">
  <span hidden>H</span>
  <span hidden>E</span>
  <span hidden>L</span>
  <span hidden>L</span>
  <span hidden>O</span><br>
  <span hidden>W</span>
  <span hidden>O</span>
  <span hidden>R</span>
  <span hidden>L</span>
  <span hidden>D</span>
</h1>

БЛОГ НА HUSL

Почему атрибут hidden не присваивается?

Ответы (1 шт):