Добавление событий нажатия

Question

У меня вопрос. Я сделал небольшой сайт в HTML и vanilla JS, чтобы действовать как счетчик. Он работает нормально, но я хотел добавить функцию, которая позволила бы пользователю добавлять или вычитать 1 из счетчика, нажимая «+» или «-», на цифровой клавиатуре или нет.

Что является самым простым способом сделать это в ванильном JS?

Answer 1

Вы хотите добавить event listener на документ

document.addEventListener('keydown', myFunction); 

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

Вы хотите посмотреть на коды клавиш для ключей вы будете использовать (+ и -) и сравнить это значение keyCode. Затем используйте условное выражение для выполнения добавления или вычитания.

Answer 2

Вы бы создать обработчик событий, который будет добавлять или вычитать из глобальной переменной на основе нажатой клавиши, как это:

window.counter=0; 
 

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

 
document.onkeypress = key;

Answer 3

Конечно, просто прикрепить к KeyUp событий и приращение или уменьшение значения при нажатии соответствующей клавиши.

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>