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

问题是您要在第一次单击后设置事件监听器，这就是为什么需要第一次单击的原因。

我不确定它是否符合您的需求，因为它有些不同，但是您可以更改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

这是因为您在第一次单击时创建了一个新的eventListener，因此在第二次单击时可以使用。

您可以将其添加到文档中，并且仅在为其指定ID时对特定元素做出反应：

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

Answer 4

您可以尝试一下。加载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>

js函数onclick需要单击一次以更改字体

4 个答案: