Usuwanie klasy po puszczeniu klawisza

0

Chciałem napisać program, który po wciśnięciu klawisza na klawiaturze doda jakieś efekty graficzne na jego wirtualnym reprezentancie. Po naciśnięciu klawisza odpowiadający mu div się podświetla dzięki dodaniu klasy w css, ale po jego puszczeniu klasa się nie usuwa.
Czy ktoś byłby w stanie pomóc mi z tym błędem?

function glowKey(e) {
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
    key.classList.add('glowing');
}

function removeGlow(e) {
    this.classList.remove('glowing');
}

const key = document.querySelectorAll('.key');
key.forEach(key => key.addEventListener('glowed', removeGlow));
window.addEventListener('keydown',glowKey);
3

@BornStubborn: Nie ma takiego event type jak 'glowed'.

0

No tak... wpisałem go roboczo i mi to umknęło, dzięki.
Zauważyłem jeszcze teraz braki w funkcji removeGlow. (nie wiem czy słusznie) Poprawiłem :

function removeGlow(e) {
    if(e.propertyName !== 'transform') return;
    this.classList.remove('glowing');
}

Ale po zmianie na transitionend nadal klasa zostaje. Powinienem użyć inny event, czy to nie w tym problem?

1

Podchodzisz do tematu od d.... strony. Ja bym zrobił tak:

https://jsfiddle.net/edy0mgzh/

w funkcjach myKeyDown / myKeyUp możesz zrobić z elementom co Ci się podoba ( dodać klasę zmienić rozmiar ... cololwiek ).

<html>
<head>
</head>
  <body>
  
    <div class='keyBtn' data-keyCode='81'>Q</div>
    <div class='keyBtn' data-keyCode='87'>W</div>
    <div class='keyBtn' data-keyCode='69'>E</div>
    <div class='keyBtn' data-keyCode='82'>R</div>
    <div class='keyBtn' data-keyCode='84'>T</div>
    <div class='keyBtn' data-keyCode='89'>Y</div>
    <div class='keyBtn' data-keyCode='85'>U</div>
    <div class='keyBtn' data-keyCode='73'>I</div>
    <div class='keyBtn' data-keyCode='79'>O</div>
    <div class='keyBtn' data-keyCode='80'>P</div>
    
    <div style='clear:both;'></div>
    
    <div class='keyBtn' data-keyCode='16'>SHIFT</div>
    <div class='keyBtn' data-keyCode='13'>ENTER</div>
    <div class='keyBtn' data-keyCode='27'>ESC</div>
    <div class='keyBtn' data-keyCode='32'>SPACE</div>
    <div class='keyBtn' data-keyCode='17'>CTRL</div>
    <div class='keyBtn' data-keyCode='18'>ALT</div>
    <div class='keyBtn' data-keyCode='8'>BACKSPACE</div>
    <div class='keyBtn' data-keyCode='46'>DELETE</div>
    
    <style>
      .keyBtn{
        float:left;
        margin:5px;
        padding:3px;
        min-width:30px;
        height:30px;
        border:solid 1px #888;
        background:#ddd;
        color:#000;
        text-align:center;
        line-height:30px;
        font-family:arial;
        font-size:16px;
        transition:0.2s;
      }
    </style>
    
    <script>
      
      function findBtnByKeyCode( keyCode ){      
        //
        // funkcja wyszukuje element odpowiadający klawiszowi i zwraca ten element
        //
        var btnList = document.querySelectorAll(".keyBtn");
        for (i = 0; i < btnList.length; i++) {
          if ( btnList[i].getAttribute ( 'data-keyCode' ) == keyCode ){
            return btnList[i] ;
          }
        }        
      }
      
      function myKeyDown( e ){
        var elm = findBtnByKeyCode( event.keyCode );      
        elm.style.background = 'red' ;
      }
      
      function myKeyUp( e ){
        var elm = findBtnByKeyCode( event.keyCode );      
        elm.style.background = '' ;
      }
           
      // obsługa zdarzenia keyDown      
      document.addEventListener('keyup', myKeyUp );
      
      // obsługa zdarzenia keyUp
      document.addEventListener('keydown', myKeyDown );      
      
    </script>    
  
  </body>
</html>
0
BornStubborn napisał(a):

Myślałem na początku zrobić to właśnie w taki sposób jak Ty i użyć keyup/keydown. Ale chciałem to uatrakcyjnić skróconym zapisem i stąd ta droga ;) A czemu mówisz, że niedobre podejście? ?Przekombinowane, czy rzecz w czymś innym?

Podpinasz do każdego elementu event a to jest nieoptymalne i nieco bez sensu. Po co po każdym naciśnięciu ma się wykonywać n eventów skoro faktycznie zdarzenie występuje tylko jedno.

key.forEach(key => key.addEventListener('glowed', removeGlow));

To tak jakby listonosz niosąc list pukał pod każdy adres żeby zapytać czy to odpowiedni adres dla dostarczenia tego listu, który swoją drogą i tak jest zaadresowany tylko w jedno konkretne miejsce. Już pomijając to co napisali wyżej, czyli co to jest zdarzenie 'glowed'?

0

@katakrowa: Rozumiem, ogromne dzięki za wyjaśnienie i pomoc :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1