Почему не добавляются стили?

Question

[Roman123987]

var str = 'Текст, текст, текст, текст, текст, текст';
var p = document.querySelector('p');
var str_arr = str.split(','); //разбиваю массив на элементы таким образом:  [ 'Текст', ' текст', ' текст', ' текст', ' текст', ' текст' ]
var i = 0;
var colors = ['red', 'green', 'black', 'yellow', 'green', 'orange', 'gray']; //массив цветов
p.innerHTML = str_arr[0]; 
setInterval(function(){ //создаю временной интервал с функцией которая будет менять цвет элемента массива
  if(i == 7){  //количество цветов в массиве цветов
    i = 0;
  }
  str_arr[0].style.color = colors[i]; //как заменить эту строку чтобы она работала?
  i++;
}, 1000);

;

Не срабатывают стили для строки вписанный в HTML тег...

Answer 1

[0xD34F]

Ну так наверное надо стили элементу задавать, а не строкам: p.style.color = colors[i].

Comments

[Roman123987]

а элементу массива вообще никак?
просто смысл в том чтобы менялся цвет у каждого слова в строке, а ставить везде span и добавлять класс как-то долго...

[0xD34F]

а элементу массива вообще никак?

Да вы с ума сошли.

менялся цвет у каждого слова в строке <...> ставить везде span <...> долго

Не долго:

const str = 'Текст1, текст2, текст3, текст4, текст5, текст6';
const p = document.querySelector('p');

let color = 0;
const colors = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'magenta'];

p.innerHTML = str.split(',').map(n => `<span>${n}</span>`).join(''); 

setInterval(spans => {
  spans.forEach((n, i) => n.style.color = colors[(color + i) % colors.length]);
  color = (color + 1) % colors.length;
}, 300, p.querySelectorAll('span'));

[Roman123987]

Спасибо за ответ)

[dollar]

Roman123987, не спасибо, а отмечайте решением, это и будет спасибо.

Answer 2

[twobomb]

var str = 'Текст, текст, текст, текст, текст, текст';
var p = document.querySelector('p');
var str_arr = str.split(',');
var i = 0;
var colors = ['red', 'green', 'black', 'yellow', 'green', 'orange', 'gray']; //массив цветов
p.innerHTML = str_arr[0]; 
setInterval(function(){ 
  p.style.color = colors[i];
  i = (i+1)%colors.length;
}, 1000);

Comments

[Roman123987]

Спасибо!

[Ярослав Иванов]

i = (i+1)%colors.length;
Очень читабельно и самое главное быстродейственно каждый раз считать.

[twobomb]

Ярослав Иванов, js и быстродействие? не, не слышал