Buttons don't work after first click, only after the second click. How to make them work right away after first click?

Question

I want to create Dram Maschine on JS.

This is my project in codepan: https://codepen.io/faber_g/pen/wvjMzrm

So far only can not figure out why buttons start work after second click(each button acts like this)

maybe problev in that when function start work there is no any ckick happen, so it start initilize click only after second click?

Is there amy chance to solve problem in my code?

function reply_click(clicked_id) {
  document.getElementsByClassName('clip')[clicked_id].play();

}

var btn = document.getElementsByClassName('drum-pad');

for (var i = 0; i < btn.length; i++) {

  btn[i].addEventListener('click', function(e) {
    document.getElementsByClassName('result')[0].innerHTML = e.target.name
  });

}


var keyCodes = [{
    code: 81,
    name: "Heater 1"
  },
  {
    code: 87,
    name: "Heater 2"
  },
  {
    code: 69,
    name: "Heater 3"
  },
  {
    code: 65,
    name: "Heater 4"
  },
  {
    code: 83,
    name: "Heater 6"
  },
  {
    code: 68,
    name: "Open HH"
  },
  {
    code: 90,
    name: "Kick n' Hat"
  },
  {
    code: 88,
    name: "Kick"
  },
  {
    code: 67,
    name: "Closed HH"
  }
];

document.addEventListener('keydown', function(e) {
  for (var j = 0; j < keyCodes.length; j++) {
    if (e.keyCode == keyCodes[j].code) {
      document.getElementById(String.fromCharCode(e.keyCode)).play();

      document.getElementsByClassName('result')[0].innerHTML = keyCodes[j].name
    }
  }
});

body {
  dispaly: flex;
  justify-content: center;
}

#drum-machine {
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#display {
  width: 200px;
  height: 60px;
  border: solid black;
}

adevel · Answer

You are asigning an event listener on every call to reply_click, so starts to sound after second call to function, I guess you should not use an event listener in that place, after all the function is called every time you press the button, try play the sound directly :

function reply_click(clicked_id)
  {
   
    var musicSpan = document.getElementsByClassName('drum-pad')[clicked_id];

//musicSpan.addEventListener('click',function(){
  document.getElementsByClassName('clip')[clicked_id].play()
//})
  }

UmairFarooq · Answer

Because first time you were clicking was storing the object in var musicSpan and then the event listener was being added. i just removed the unnecassary code and played the audio on first click by moving document.getElementsByClassName('clip')[clicked_id].play() out of the event listener because you dont need it

  function reply_click(clicked_id) {
        document.getElementsByClassName('clip')[clicked_id].play()
        // var musicSpan = document.getElementsByClassName('drum-pad')[clicked_id];

        // musicSpan.addEventListener('click', function () {

        // })
    }
     var btn = document.getElementsByClassName('drum-pad');

    for (var i = 0; i < btn.length; i++) {

        btn[i].addEventListener('click', function (e) {
            document.getElementsByClassName('result')[0].innerHTML = e.target.name
        })
    }

 body {
        display: flex;
        justify-content: center;
    }

    #drum-machine {
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;


    }

    #display {
        width: 200px;
        height: 60px;
        border: solid black;
    }

Buttons don't work after first click, only after the second click. How to make them work right away after first click?

2 Answers