我必须双击跟随按钮才能运行这是由于使用了 click 事件 2 次

Question

I am working on follow button and with the help of JavaScript I've come up with the following code.

But the problem is I have to double click the follow button to functioning this is due to using click event 2 time. I am open to better methods of solving this too.

 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

There is a double click event. You can check the if it satisfies your requirement.

MDN link - https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event

Answer 2

For multiple buttons with the same function, I would give all of them the same class (eg "btn"). Then in JS simply get all of the elements with this class, loop over the HTMLCollection which you would get and assign each element an eventlistener. When you want to change something on the button you have to use event.target in the function:

 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>