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?

this is JS part for reference, but maybe better go to codepan and see it all together:

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

musicSpan.addEventListener('click',function(){
  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
})
}

CodePudding user response：

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;
    }

<div id="drum-machine">

        <div  id="display">
            <p></p>
        </div>

        <button  id="0" name="Heater 1" onClick="reply_click(this.id)">
            <audio  id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3">
            </audio>
            Q
        </button>

        <button  id="1" name="Heater 2" onClick="reply_click(this.id)">
            <audio  id="W" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3">
            </audio>
            W
        </button>

        <button  id="2" name="Heater 3" onClick="reply_click(this.id)">
            <audio  id="E" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3">
            </audio>
            E
        </button>

        <button  id="3" name="Heater 4" onClick="reply_click(this.id)">
            <audio  id="A" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3">
            </audio>
            A
        </button>

        <button  id="4" name="Heater 6" onClick="reply_click(this.id)">
            <audio  id="S" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3">
            </audio>
            S
        </button>

        <button  id="5" name="Open HH" onClick="reply_click(this.id)">
            <audio  id="D" src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3">
            </audio>
            D
        </button>

        <button  id="6" name="Kick n' Hat" onClick="reply_click(this.id)">
            <audio  id="Z" src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3">
            </audio>
            Z
        </button>

        <button  id="7" name="Kick" onClick="reply_click(this.id)">
            <audio  id="X" src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3">
            </audio>
            X
        </button>

        <button  id="8" name="Closed HH" onClick="reply_click(this.id)">
            <audio  id="C" src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3">
            </audio>
            C
        </button>

    </div>

CodePudding user response：

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()
//})
  }
 

CodePudding user response：

this also happened to me. Buttons don't work after the first click, they are easiest after the second click. How to make them work immediately after the first click on this is what I needed most. cps test