Функция js onclick нужно нажать один раз, чтобы изменить шрифт

Question

событие работает нормально в js при двойном нажатии для изменения шрифта. Я хочу, чтобы то же самое работало и с одним щелчком мыши.

js код ниже.

function changered() {
iconsred.addEventListener('click', function(event) {
    event.target.classList.toggle('fas');
    event.style.color= "#ff0000";
 }) }

HTML-код ниже.

<a onclick="changered()" href="#">
   <div class="thumb-down">
     <i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>
   </div>
</a>

Answer 1

Проблема в том, что вы устанавливаете EventListener после первого клика, поэтому вам нужен первый клик.

Я не уверен, что он соответствует вашим потребностям, так как он немного отличается, но вы можете изменитьцвет обратного вызова changered вместо добавления прослушивателя событий.Что-то вроде:

function changered() {
  icon = document.getElementById('iconsred');
  icon.classList.toggle('fas');
  icon.style.color= "#ff0000";
}

Answer 2

Любая причина, по которой вы добавляете событие щелчка на <a>?

iconsred, не имеет события щелчка, прежде чем запустить changered(), поэтому вам нужно дважды щелкнуть по нему.

Вы можете сделать это так:

var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
  event.target.classList.toggle('fas');
  event.target.style.color = "#ff0000";
})

Демо

var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
  event.target.classList.toggle('fas');
  event.target.style.color = "#ff0000";
})

<a href="#">
  <div class="thumb-down">
    <i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
  </div>
</a>

Answer 3

Вы можете попробовать это.После загрузки DOM мы добавляем слушателя.

document.addEventListener("DOMContentLoaded", function(event) { 
   iconsred.addEventListener('click', function(event) {
    event.target.classList.toggle('fas');
    event.style.color= "#ff0000";
   })
   });

<a onclick="changered()" href="#">
   <div class="thumb-down">
     <i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
   </div>
</a>

Answer 4

Это потому, что вы создаете новый eventListener при первом щелчке, и, следовательно, он срабатывает при втором щелчке.

Вы можете добавить его в документ и реагировать только на определенный элементесли вы даете ему идентификатор:

document.addEventListener('click', function(event) {
    if(e.target.id === "yourId") {
       event.target.style.color= "#ff0000";
    }
 })