Изменить цвет значка материала с помощью document.getElementById (item) не работает

Question

if (document.getElementById(item).style.color == "grey") {
  document.getElementById(item).style.color = "red";
}

<i class="material-icons" [ngStyle]="post.isLiked != null ? {'color': 'red'}: {'color': 'grey'}" id="{{i}}" (click)="LikePost(post.postType,post.postId,post.isLiked,i)">favorite</i>

Я хочу изменить цвет значка материала при нажатии на него.Ранее он работал на Chrome. Внезапно он перестал работать. Я не могу выяснить причину. Пожалуйста, помогите или что еще я могу использовать ??

Answer 1

При использовании getElementById необходимо указывать идентификатор в кавычках, например:

let element = document.getElementById('my-element');

Кроме того, если в будущем у вас возникнут проблемы с этими назначениями JavaScript, не забудьте использовать консоль винструменты разработчика в вашем браузере.Вы можете ввести свой код непосредственно в консоль, затем ввести имя переменной и нажать клавишу ввода, чтобы увидеть, вернется ли правильный элемент.

Answer 2

Проблема была не с синтаксисом, но я использовал один и тот же идентификатор для 2 кнопок - как и следуйте.Вот почему он перестал работать для одного. Мой плохо!

Answer 3

<i class="material-icons" [style.color]="post.isLiked != null ? 'red': 'grey'" [id]="i" (click)="LikePost(post.postType,post.postId,post.isLiked,i)">favorite</i>