Ajout d'événements de pression de touche

Question

J'ai une question. J'ai fait un petit site en HTML et JS vanilla pour agir comme un compteur. Cela fonctionne bien, mais je voulais ajouter une fonction qui permettrait à l'utilisateur d'ajouter ou de soustraire 1 du compteur en appuyant sur "+" ou "-", dans le pavé numérique ou non.

Quelle est la façon la plus simple de faire cela dans vanilla JS?

Answer 1

Vous voulez ajouter un event listener sur le document

document.addEventListener('keydown', myFunction); 

function myFunction(e) { 
    var keyCode = e.keyCode(); 
    ... 
} 

Vous aurez envie de regarder les keycodes que vous utiliserez (+ et -) et comparer cette valeur à keyCode. Utilisez ensuite un conditionnel pour exécuter votre ajout ou votre soustraction.

Answer 2

Vous créer un gestionnaire d'événements, qui ajouterait ou soustraire à une variable globale en fonction de la touche enfoncée, comme ceci:

window.counter=0; 
 

 
function key(ev){ 
 
    if(ev.keycode==107) window.counter++; 
 
    if(ev.keycode==109) window.counter--; 
 
} 
 

 
document.onkeypress = key;

Answer 3

Bien sûr, juste attacher aux événements KeyUp et incrémenter ou décrémenter la valeur lorsque la touche appropriée est enfoncée.

var value = 0; 
 

 

 
document.addEventListener("DOMContentLoaded", function(event) { 
 
    document.querySelector(".valueHolder").innerHTML = value; 
 
    
 
}); 
 

 
document.addEventListener("keyup", function(event) { 
 
    
 
    if (event.which == "187" || event.which == "107") { // + key 
 
    value++; 
 
    } 
 

 
    if (event.which == "189" || event.which == "109") { // - key 
 
    value--; 
 
    } 
 

 
    
 
    document.querySelector(".valueHolder").innerHTML = value; 
 
    
 
    
 
console.log(event.which); 
 
});

<div class="valueHolder"></div>