HTML Clickable барабанный набор, не может установить цвет фона в CSS/HTML/как я могу назначить клавиши клавиатуры для HTML-кнопок?

Question

Это мой HTML код

<H1> <center> BASIC DRUM KIT </center> </H1> 
    <img class="drums" src="drums.jpg" /> 
    <button class="kick" onclick="Kick()"> Bass Drum </button> 
    <button class="snare" onclick="Snare()"> Snare </button> 
    <button class="floortom" onclick="FloorTom()"> Floor Tom </button> 
    <button class="lowtom" onclick="LowTom()"> Low Tom </button> 
    <button class="hightom" onclick="HighTom()"> High Tom </button> 
    <button class="hihat" onclick="OpenHat()"> Open Hi-Hat </button> 
    <button class="cymbal" onclick="Cymbal1()"> Cymbal </button> 
    <button class="cymbal2" onclick="Cymbal2()"> Cymbal </button> 
    <button class="ride" onclick="RideCymbal()"> Ride Cymbal</button> 
    <hr /> 

CSS

.drums{ 
    position:absolute; 
    margin-top:2em; 
    margin-left:30em;} 
.cymbal { 
position: absolute; 
    margin-top:15em; 
    margin-left:75em;  } 
.cymbal2 { 
position: absolute; 
    margin-top:15em; 
    margin-left:48.5em;  } 
.hihat { 
position: absolute; 
    margin-top:23em; 
    margin-left:42.4em;  } 
.ride { 
position: absolute; 
    margin-top:23em; 
    margin-left:78em;  } 
.hightom { 
position: absolute; 
    margin-top:21.5em; 
    margin-left:54.5em;  } 
.kick { 
position: absolute; 
    margin-top:30em; 
    margin-left:60.5em;  } 
.snare { 
position: absolute; 
    margin-top:30em; 
    margin-left:50.5em;  } 
.floortom { 
position: absolute; 
    margin-top:30.2em; 
    margin-left:72.7em;  } 
.lowtom { 
position: absolute; 
    margin-top:21.5em; 
    margin-left:68.2em;  } 

JavaScript

function Kick() { 
var kick = new Audio("kick-acoustic02.wav"); 
kick.play(); } 

    function Snare() { 
var snare = new Audio("snare-acoustic01.wav"); 
snare.play(); } 

    function FloorTom() { 
var floortom = new Audio("snare-brute.wav"); 
floortom.play(); } 

    function LowTom() { 
var lowtom = new Audio("tom-acoustic02.wav"); 
lowtom.play(); } 

    function HighTom() { 
var hightom = new Audio("tom-acoustic01.wav"); 
hightom.play(); } 

    function OpenHat() { 
var hihat = new Audio("openhat-acoustic01.wav"); 
hihat.play(); } 

    function Cymbal1() { 
var cymbal = new Audio("crash-acoustic.wav"); 
cymbal.play(); } 

    function Cymbal2() { 
var cymbal2 = new Audio("crash-acoustic2.wav"); 
cymbal2.play(); } 

    function RideCymbal() { 
var ride = new Audio("ride-acoustic02.wav"); 
ride.play(); } 

Это сделано и работает, но я не могу добавить background-color с помощью css. Я даже пытался с телом style="background-color:*color*;" в html, и это не сработало. Какие-либо предложения?

Другой вопрос: Как назначить клавишу клавиатуры кнопке html? Это было бы намного лучше, чем нажимать кнопки.

Спасибо, и да, это мой первый скрипт/страница когда-либо также первый qustion на stackoverflow.com, так что извините за непрофессионализма, я ценю конструктивную критику :)

Answer 1

Чтобы назначить событие клавиатуры к DOM (Document Object Model), необходимо привязать обработчик события к Document.

Самый простой способ сделать это с помощью JQuery:

$("document").keypress(function(event) { 
    if (event.which == 13) { // keycode 
    event.preventDefault(); 
    } 
}); 

https://api.jquery.com/keypress/

Чистый путь JavaScript делать (без JQuery):

function addEvent(element, eventName, callback) { 
    if (element.addEventListener) { 
     element.addEventListener(eventName, callback, false); 
    } else if (element.attachEvent) { 
     element.attachEvent("on" + eventName, callback); 
    } 
} 

addEvent(window, "keydown", Keypress); 
addEvent(window, "keyup", Keyoff); 

JavaScript equivalent of jQuery's keyup() and keydown()

Key Код

Вы можете проверить код ключа в http://keycode.info/ в интерактивном режиме.

Еще одна вещь

Если вы задаете два вопроса пытаются разделить их на две части.

Answer 2

вам не нужно определить "цвет фона",

просто определить фон:

например.

.classname{ 
    background: #00ff00; 
}