JS30 DRUMKIT classList.remove is not working-CodePudding

i've been trying to make the drumkit project from JS30, but im having trouble to remove the transition effect once its over. Ive tried to add a keyup event, a transitionend, and different querySelectors but its just not working... here is my code with the removeTransition function from the original project... someone could make it work??

HTML

<body>
    <main>  
        <div >
            <div id="a"  onClick="clickHandler('a')">
                <kbd>A</kbd>
                <p >clap</p>
            </div>
            <div id="s"   onClick="clickHandler('s')">
                <kbd>S</kbd>
                <p >hihat</p>
            </div>
            <div id="d"  onClick="clickHandler('d')">
                <kbd>D</kbd>
                <p >kick</p>
            </div>
            <div id="f"  onClick="clickHandler('f')">
                <kbd>F</kbd>
                <p >openhat</p>
            </div>
            <div id="g"   onClick="clickHandler('g')">
                <kbd>G</kbd>
                <p >boom</p>
            </div>
            <div id="h"  onClick="clickHandler('h')">
                <kbd>H</kbd>
                <p >ride</p>
            </div>
            <div  id="j"  onClick="clickHandler('j')">
                <kbd>J</kbd>
                <p >snare</p>
            </div>
            <div id="k"  onClick="clickHandler('k')">
                <kbd>K</kbd>
                <p >tom</p>
            </div>
            <div id="l"  onClick="clickHandler('l')">
                <kbd>L</kbd>
                <p >tink</p>
            </div>
        </div>
    </main>

    
    <audio data-key="a" src="./audio/01 - JavaScript Drum Kit_sounds_clap.wav"></audio>
    <audio data-key="s" src="./audio/01 - JavaScript Drum Kit_sounds_hihat.wav"></audio>
    <audio data-key="d" src="./audio/01 - JavaScript Drum Kit_sounds_kick.wav"></audio>
    <audio data-key="f" src="./audio/01 - JavaScript Drum Kit_sounds_openhat.wav"></audio>
    <audio data-key="g" src="./audio/01 - JavaScript Drum Kit_sounds_boom.wav"></audio>
    <audio data-key="h" src="./audio/01 - JavaScript Drum Kit_sounds_ride.wav"></audio>
    <audio data-key="j" src="./audio/01 - JavaScript Drum Kit_sounds_snare.wav"></audio>
    <audio data-key="k" src="./audio/01 - JavaScript Drum Kit_sounds_tom.wav"></audio>
    <audio data-key="l" src="./audio/01 - JavaScript Drum Kit_sounds_tink.wav"></audio>

    <script src="./scripts.js"></script>
</body>

const keymap = {
    a: "a",
    s: "s",
    d: "d",
    f: "f",
    g: "g",
    h: "h",
    j: "j",
    k: "k",
    l: "l"  
}


function removeTransition(e) {

    if(e.propertyName!=='transform') return;
    this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key')
keys.forEach(key => key.addEventListener('transitionend', removeTransition));


function play(key) {
    const keyElement = document.querySelector(`.key[id="${key}"]`); 
    const audioElement = document.querySelector(`audio[data-key="${key}"]`);
    
    keyElement.classList.add('playing');
    audioElement.currentTime = 0;
    audioElement.play();

}


window.addEventListener('keydown',(e)=>{
    const key = keymap[e.key];
    if (key) {
        play(key);
    }
})


function clickHandler (key){
    play(key);
}

CodePudding user response：

This option is saving the previous elements:

      let prevkeyElement, prevaudioElement;

      function play(key) {
        if (prevkeyElement !== undefined) {
          prevkeyElement.classList.remove("playing");
          prevaudioElement.pause();
        }

        const keyElement = document.querySelector(`.key[id="${key}"]`);
        const audioElement = document.querySelector(`audio[data-key="${key}"]`);
        prevkeyElement = keyElement;
        prevaudioElement = audioElement;

        keyElement.classList.add("playing");
        audioElement.currentTime = 0;
        audioElement.play();
      }

      window.addEventListener("keydown", (e) => {
        const key = keymap[e.key];
        if (key) {
          play(key);
        }
      });

      function clickHandler(key) {
        play(key);
      }