'JS30 DRUMKIT classList.remove is not working

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 class="keys">
            <div id="a" class="key" onClick="clickHandler('a')">
                <kbd>A</kbd>
                <p class="sound">clap</p>
            </div>
            <div id="s" class="key"  onClick="clickHandler('s')">
                <kbd>S</kbd>
                <p class="sound">hihat</p>
            </div>
            <div id="d" class="key" onClick="clickHandler('d')">
                <kbd>D</kbd>
                <p class="sound">kick</p>
            </div>
            <div id="f" class="key" onClick="clickHandler('f')">
                <kbd>F</kbd>
                <p class="sound">openhat</p>
            </div>
            <div id="g"  class="key" onClick="clickHandler('g')">
                <kbd>G</kbd>
                <p class="sound">boom</p>
            </div>
            <div id="h" class="key" onClick="clickHandler('h')">
                <kbd>H</kbd>
                <p class="sound">ride</p>
            </div>
            <div  id="j" class="key" onClick="clickHandler('j')">
                <kbd>J</kbd>
                <p class="sound">snare</p>
            </div>
            <div id="k" class="key" onClick="clickHandler('k')">
                <kbd>K</kbd>
                <p class="sound">tom</p>
            </div>
            <div id="l" class="key" onClick="clickHandler('l')">
                <kbd>L</kbd>
                <p class="sound">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);
}

Solution 1:^[1]

@Sql on a class level will be executed once before the test suite is run.

@BeforeEach will be executed before each test method.

So It looks like you need your @Sql to run before each method as well. you can either do it manually in the same method or annotate methods with @sql instead (so not at class level but at method level)

see more here https://www.baeldung.com/spring-boot-data-sql-and-schema-sql#sqlannotation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	J Asgarov

'JS30 DRUMKIT classList.remove is not working

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]