Почему при добавление переменно в style, она перестаёт обновляться?

Когда вы добавляете переменную к стилю элемента в JavaScript, это делается путем изменения свойства style этого элемента. Например, если у вас есть элемент div с id myDiv, и вы хотите изменить его цвет фона с помощью переменной color, вы, вероятно, будете писать что-то вроде:

document.getElementById('myDiv').style.backgroundColor = color;

Проблема, с которой вы сталкиваетесь, возникает в том случае, если переменная color изменяется после того, как вы уже использовали её для установки свойства цвета фона элемента. Давайте представим, что код выглядит следующим образом:

let color = 'blue';
document.getElementById('myDiv').style.backgroundColor = color;

// Через некоторое время переменная color изменяется
color = 'red';

В данном случае, даже если вы поменяете значение переменной color на red, цвет фона элемента myDiv не изменится. Это происходит потому, что стиль элемента уже был установлен с использованием предыдущего значения переменной color.

Чтобы учитывать изменения переменных в стилях элементов, необходимо обновлять свойства стилей каждый раз, когда изменяется соответствующая переменная. Например, можно использовать функции или события для обновления стилей с учётом изменений переменных.

function updateColor(newColor) {
    document.getElementById('myDiv').style.backgroundColor = newColor;
}

let color = 'blue';
updateColor(color);

// Позже изменяем цвет
color = 'red';
updateColor(color);

Таким образом, следует помнить, что при изменении переменных, которые используются для установки стилей элементов, необходимо также обновлять стили этих элементов в соответствии с новыми значениями переменных для того, чтобы изменения применялись корректно.