CODEWITHSUNDEEP
javascriptaddeventlistener
user10546342
user10546342

Reputation:

adding a click event to a key event

How can I make the button appear pressed regardless of how I trigger the event? (either with the keydown event or the click event). I thought about adding "click()" to the keydown event, but it doesn´t work

Upvotes: 1

Views: 69

Answers (2)

dgeare
dgeare

Reputation: 2658

Unfortunately there is no way through javascript to trigger the UserAgent styles and make a button look "pressed". You will probably need to use a css solution, which you can style to look like the default button if you really wanted.

That means you would need to track the down and up events of the buttons so you can control what state the button is in. I have an example of that below.

const drumpad = [].slice.call(document.querySelectorAll('.drum-pad'));
    const displaytext = document.querySelector('#displaytext');

    const texts = ["Heater 1", "Heater 2", "Heater 3", "Heater 4", "Heater 6", "Open HH", "Kick N Hat", "Kick", "Closed HH"]; 
    const keycodes = [81, 87, 69, 65, 83, 68, 90, 88, 67];

    function downhandler(e) { 
      const index = e.type === 'keydown'?keycodes.indexOf(e.keyCode):drumpad.indexOf(this); 
      const target = drumpad[index]; 
      if (!target) return; 
      const audio = target.childNodes[0]; 
      audio.play(); 
      displaytext.textContent = texts[index]; 
      if(e.type === "mousedown"){
        //if we're a button (click case) use the event target
        e.target.classList.add('pressed');
      }else{
        //we need to find the button.
        const letter = String.fromCharCode(e.keyCode).toUpperCase();//get the uppercase key pressed
        const audio = document.getElementById(letter);//find the audio element with that id
        if(audio){
          const button = audio.parentNode;
          //and get it's parent
          button.classList.add('pressed');//make it pressed
        }
      }
    } 
    function mouseuphandler(e) {
      //remove the pressed class from event target
      e.target.classList.remove('pressed');
    }
    function keyuphandler(e){
      const letter = String.fromCharCode(e.keyCode).toUpperCase();
      const button = document.getElementById(letter).parentNode;
      button.classList.remove('pressed');
    }
    drumpad.forEach(function(el) { 
      el.addEventListener('mousedown', downhandler);
      el.addEventListener('mouseup', mouseuphandler);
      el.addEventListener('mouseout', mouseuphandler);//needed incase the mouse is released after leaving the element
    }); 
    document.addEventListener("keydown", downhandler);
    document.addEventListener("keyup", keyuphandler);
button{
  background:#a0a0e0;
  border:1px solid #666;
  border-radius:2px;
  padding:5px;
}

button.pressed{
  background:#a0e0cb;
}
<!DOCTYPE html>
    <html>
    <head>
        <title>Drump pad</title>
        <link rel="stylesheet" type="text/css" href="drumpad.css">
    </head>
    <body>
        <div id="drum-machine">
            <div id="display">
                <p id="displaytext"></p>
            </div>
                <div id="controls1">
                <button id="Heater1button"  class="drum-pad"><audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" preload="auto"></audio>Q</button>
                <button id="Heater2button" class="drum-pad"><audio class="clip" id='W' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" preload="auto"></audio>W</button>
                <button id="Heater3button" class="drum-pad"><audio class="clip" id='E' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" preload="auto"></audio>E</button>
                </div>
            <div id="controls2">
                <button id="Heater4button" class="drum-pad"><audio class="clip" id='A' src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" preload="auto"></audio>A</button>
                <button id="Heater6button"  class="drum-pad"><audio class="clip" id='S'src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>S</button>
                <button id="OpenHHbutton"  class="drum-pad"><audio class="clip" id='D'src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>D</button>
            </div>
            <div id="controls3">
                <button id="KicknHat" class="drum-pad"><audio class="clip" id='Z'src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>Z</button>
                <button id="Kickbutton"class="drum-pad"><audio class="clip" id='X'src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>X</button>
                <button id="ClosedHHbutton"class="drum-pad"><audio class="clip" id='C' src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>C</button>
            </div>
        </div>

    </body>
    </html>

edit

I just noticed it's broken... hangon...

edit

okay now it should be good

Upvotes: 1

Vasavi Joola
Vasavi Joola

Reputation: 31

EternalDoubter How could I add the focus or the css class after the key event?

By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;

Using the :active pseudo class:

button {
  background: #ededed;
  border: 1px solid #ccc;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
}

button:active {
  background: #e5e5e5;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
   outline: none;
}
<button>
  Click me
</button>

Using the :focus pseudo class:

button {
  background: #ededed;
  border: 1px solid #ccc;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
}

button:focus {
  background: #e5e5e5;
  outline: none;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
  Click me
</button>

Upvotes: 0

Related Questions