Сохранить идентификатор в переменной и добавить стиль к нему

Question

Я хочу случайным образом выделить слово, которое находится внутри тега <p>, с помощью id=JShighlight. Он должен мигать один раз, а затем мигать другое случайно выбранное слово. ** Я не могу добавить стиль css, необходимый для идентификатора.

Слова вложены в промежуток с уникальным идентификатором, таким как id="one" oder id="two". Например:

<p id="JShighlight"> <span id="one">Lorem </span><span id="two">Ipsum </span><span id="three">Dolores</span></p>

Чтобы выбрать слово случайным образом, я строю массив с дочерними узлами JShighlight. И назовите его childNodeArray

let childNodeArray = document.getElementById('JShighlight').children;

Затем я случайно выбрал индекс:

  let i = Math.floor(Math.random() * childNodeArray.length);

Имя переменной сохраняет случайно выбранный идентификатор.

let name = childNodeArray[i].id;

К этому случайно выбранному слову / Id Я хочу добавить определенный стиль, чтобы это слово мигало один раз. Я пытался:

name.classList.add("blinking");

(. Мигает это css -класс:

.blinking {
    animation: blinkingText 0.6s 1;
    /* animation-iteration-count: 1; */
}

)

Но это не работает. Что «работает»:

document.getElementById(name).style.color = "red";

Почему я могу передать переменную в качестве аргумента в последнем случае, а не в первом случае? Как добавить класс css к идентификатору переменной?

Answer 1

используйте Array.from для преобразования дочернего списка DOM в массив элементов DOM. Также удалите атрибут id перед сохранением именной переменной.

Пожалуйста, обновите строки ниже.

let childNodeArray = Array.from(document.getElementById('JShighlight').children);
let i = Math.floor(Math.random() * childNodeArray.length);
let name = childNodeArray[i];
name.classList.add("blinking");

Answer 2

Вместо

let name = childNodeArray[i].id;

try

let name = childNodeArray[i];

Надеюсь, ваша проблема будет решена;

Answer 3

В первом случае name - это строка, а не элемент.
что вы можете сделать:

name = document.getElementById(name);
name.classList.add("blinking");