Сделайте заголовок страницы меняющим цвет каждый раз, когда пользователь нажимает на нее - PullRequest
Новая
       12

Сделайте заголовок страницы меняющим цвет каждый раз, когда пользователь нажимает на нее

0 голосов
/ 21 апреля 2020

Сделать заголовок страницы, меняющий цвет каждый раз, когда пользователь нажимает на нее 

function makeItClickable() {
    var myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643'];
    document.getElementsByTagName('h1')[0].addEventListener('click', function(){
      for(i = 0; i < myColors.length; i++) {
        this.style.color = myColors[i];
      }
    });
  }

Это работает только один раз! Мне нужна ваниль JS

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

Сохраните текущий индекс в переменную, затем обновите свой стиль. Циклически бросайте массив, как только вы доберетесь до конца (используя оператор modulus , чтобы сделать код компактным). Вот скрипка .

HTML

<h1>Heading</h1>

JavaScript

let i = 0;

let colors = [
   'red', 
   'purple', 
   '#E84751', 
   'blue', 
   'orange', 
   '#323643'
];

document.getElementsByTagName('h1')[0].addEventListener('click', function () {
   // Increase the counter, reset it when end is reached
   i = (i + 1) % colors.length;

   this.style.color = colors[i];
}
1 голос
/ 21 апреля 2020

Вы не хотите, чтобы все oop

const myColors = ['red', 'purple', '#E84751', 'blue', 'orange', '#323643'];
let cnt = 0;

document.querySelector('h1').addEventListener('click', function() {
  if (cnt >= myColors.length) cnt = 0; // reset
  this.style.color = myColors[cnt];
  cnt++;
})
<h1>This is a header</h1>
...