Как сделать так, чтобы при клике на кнопку менялся цвет каждого слова в тексте с помощью JS?

Рейтинг: 0Ответов: 2Опубликовано: 30.04.2023

Кликаешь на кнопку. После клика каждое слово в тексте по очереди начинает менять цвет с интервалом в 1 секунду. К примеру: цвет текста белый. Сначала 1 слово становится красным, проходит секунда следующее слово становится красным, когда следующее слово становится красным предыдущее слово возвращается в исходный цвет. Количество слов в тексте может большим , поэтому не вариант прописывать возле каждого слова id и тп.

<body>
    <div class="wrapper">
        <div class="container">
            <div class="main-block">
                <div class="main-block__content">
                    <div class="main-block__title">
                        Оглавление
                    </div>
                    <div id='p' class="main-block__text">
                        Здесь должен меняться цвет каждого слова при клике на кнопку
                    </div>
                    <button class="button">Начать</button>
                </div>
            </div>
        </div>
    </div>
</body>
css javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Ещё вариант на jQuery

$('.button').click(() => {
  // Разбили на слова текст
  const words = $('#p').text().trim().split(' ');

  // Вставили в DOM элементы, чтобы на них можно было добавлять CSS
  $('#p').html(words.map((word) => `<span>${word}</span>`).join(' '));

  // Добавили пустое слово в массив, чтобы в конце не зависло последнее красное слово
  // Каждую секунду по таймауту меняем css следующего слова на красный цвет, а предыдущего на черный
  (words.concat([''])).forEach((_word, i) => {
    setTimeout(() => {
      $(`#p span:nth-child(${i})`).css({
        color: 'black'
      });
      $(`#p span:nth-child(${i+1})`).css({
        color: 'red'
      });
    }, (i + 1) * 1000);
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="wrapper">
    <div class="container">
      <div class="main-block">
        <div class="main-block__content">
          <div class="main-block__title">
            Оглавление
          </div>
          <div id='p' class="main-block__text">
            Здесь должен меняться цвет каждого слова при клике на кнопку
          </div>
          <button class="button">Начать</button>
        </div>
      </div>
    </div>
  </div>
</body>

▲ 3

document.querySelector('.button').addEventListener('click', () => { gogo(); });


function gogo(coloredWordIndex = 0) {    
  let textBlock = document.querySelector('div.main-block__text');
  let textAsArray = textBlock.textContent.trim().split(" ");  
  
  textAsArray[coloredWordIndex] = `<span class="blue-color">${textAsArray[coloredWordIndex]}</span>`  
  textBlock.innerHTML = textAsArray.join(' ');
  
  setTimeout(() => {            
      coloredWordIndex > textAsArray.length - 2 ? gogo() : gogo(++coloredWordIndex);    
  }, 500);
}
.blue-color {
  color: blue;
}
<body>
    <div class="wrapper">
        <div class="container">
            <div class="main-block">
                <div class="main-block__content">
                    <div class="main-block__title">
                        Оглавление
                    </div>
                    <div id='p' class="main-block__text">
                        Здесь должен меняться цвет каждого слова при клике на кнопку
                    </div>
                    <button class="button">Начать</button>
                </div>
            </div>
        </div>
    </div>
</body>