Answers for "how to handle multiple button with one event listener in javascript"

11

add event listener to multiple element in JS

document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})
Posted by: Guest on August-07-2020
0

multiple event with javascript

/* get the button id "tg" which is used for toggling.Then on click few 
elements with classname "adv" will disappear and at the same time few elements 
with classname "btnpro" will increase in width to 80px*. Upon second click  
elements with "adv" will appear again and the button width changes to 60px*/

document.getElementById("tg").onclick = function ()
{
  my_fun1();
  my_fun2();
}

function my_fun1()
{
  var x = document.getElementsByClassName("adv")
    for(var i=0; i<x.length;i++) {
      if (x[i].style.display === "none") {
        x[i].style.display = "block"
        flag = false
      } else {
        x[i].style.display = "none"
        flag = true           
      }      
    }  
}

function my_fun2()
{
  var x = document.getElementsByClassName("btnpro")
    for(var i=0; i<x.length;i++) {
      if(flag){
        x[i].style.width = "80px";
      }else{
        x[i].style.width = "60px";
      }  
    }
}
Posted by: Guest on September-28-2020

Code answers related to "how to handle multiple button with one event listener in javascript"

Code answers related to "Javascript"

Browse Popular Code Answers by Language