Javascript按键使光明

Question

on a web page how do you enable the user to light up the boxes/items on the page using a specific key on your keyboard? eg. i want M to light up my title and when i press M again it turns it off?

this is what i have so far but feel like it could be cleaned up a lot

$('#abutton').click(function() {
    $('#abutton').removeClass('off').addClass('on');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#bbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('off').addClass('on');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#cbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('off').addClass('on');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#dbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('off').addClass('on');
    window.scrollTo(0,0);
});

Answer 1

Just add the general class .button to all of them. Then remove on from all .button elements and add on class to exact clicked element.

$('.button').click(function() {
    $('.button').removeClass('on').addClass('off');
    $(this).removeClass('off').addClass('on');
    window.scrollTo(0,0);
});

Answer 2

You need to add addEventListener to your code and check inside it if the pressed key has keyCode you're expecting to do some action. Look on example below:

addEventListener("keydown", (event) => { if (event.keyCode === '13') //light on/off });

Please check docs for more details

EDIT: jQuery also has its keyboard events