我必须双击“关注”按钮才能运行这是由于使用单击事件2时间

Question

我正在研究“关注”按钮，并在 JavaScript 的帮助下编写了以下代码。

但问题是我必须双击“跟随”按钮才能运行，这是由于使用了两次单击事件。我也愿意接受更好的方法来解决这个问题。

 
  var value = null;
    
const onClick = (event) => {
    // event.target.id
 
    value = event.target.id;
  console.log(value);
document.getElementById(`${value}`).addEventListener('click',function(){
    // console.log(value.id);
        if(this.classList.contains('follow')){
        this.classList.remove('follow');
       this.innerHTML ="Following";
       this.style.backgroundColor = 'green' ;
    }else{
        this.classList.add('follow');
        this.style.backgroundColor = 'rgb(27,18,83)' ;
        this.innerHTML="Follow";
    }
    })



}
window.addEventListener('click', onClick);

Answer 1

有一个双击事件。您可以检查是否满足您的要求。

mdn链接 - https：https://developer.mozilla.org/en en en -us/doc/web/api/element/dblclick_event

Answer 2

对于具有相同功能的多个按钮，我会给它们所有相同的类（例如“btn”）。然后在 JS 中只需获取此类的所有元素，循环遍历您将获取的 HTMLCollection 并为每个元素分配一个事件侦听器。当您想更改按钮上的某些内容时，您必须在函数中使用 event.target ：

let buttons = document.getElementsByClassName("btn");
for (btn of buttons) {
    btn.addEventListener("click", (event) => {
  
    if(event.target.classList.contains('follow')){
      event.target.classList.remove('follow');
      event.target.innerHTML ="Following";
      event.target.style.backgroundColor = 'green' ;
    }else{
      event.target.classList.add('follow');
      event.target.style.backgroundColor = 'rgb(27,18,83)' ;
      event.target.innerHTML="Follow";
    }
    
  });
}

<button class="btn">1</button>
<button class="btn">2</button>