Я создаю простого чата.
В каждом новом сообщении, полученном с сервера, создается новый HTML-элемент, который отправляется в браузер.
Так, например, сообщение 1 будет:
<div class="message-computer"><p>Hi, how are you?</p></div>
Затем вы (пользователь) печатаете / отправляете сообщение, которое отображается как:
<div class="message-user"><p>I am good, thanks!</p></div>
и т. Д. И т. П.
Я пытаюсь добавить кнопку для изменения цвета фона всех существующих сообщений чата и любых новых входящих сообщений с компьютера.
Это будет работать, если я отредактирую CSS для .message-computer
. Я хочу иметь возможность переключаться между двумя цветами.
Итак, я добавил кнопку в свой HTML, и она ссылается на этот javascript:
<script>
function changeClass(){
var myElements = document.querySelectorAll(".message-computer");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.color = "black";
myElements[i].style.backgroundColor = "yellow";
}
}
</script>
Этот вид работ - он внедряет CSS в существующие элементы, например, так:
<div class="message-computer" style="color: black; background-color: yellow;"><p>Hi, how are you?</p></div>
Это не работает для новых сообщений вообще.
Как я могу заставить его работать для любых новых и входящих сообщений? Я попытался установить родительский элемент, но так как новый div создается для каждого нового элемента, это не работает.
Может кто-нибудь предложить какую-нибудь помощь, пожалуйста?