HTML Clickable drum set, can't set the background color in CSS/HTML/ how can I assign keyboard keys to HTML buttons?

Question

This is my html code

<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(); }

It is made and working but I can't add background-color using css. I even tried with body style="background-color:*color*;" in html and it didn't work. Any suggestions?

Other question: How can I assign a keyboard key to an html button? It would be so much better than clicking the buttons.

Thanks, and yes, this is my first script / page ever also the first qustion on stackoverflow.com, so sorry for the unprofessionalism, I'd appreciate some constructive criticism :)

what particular value did you try to give as a value for background-color ? it accepts hex codes, strings and rgb() function, e.g background-color: yellow; or background-color: #00ff00; or background-color: rgb(255,0,255);, and regarding mapping buttons to keyboard, just add this to your html tag 'accesskey="h"', or whatever key you want — Onur A., Feb 13 '17 at 01:47

score 0 · Answer 1 · answered Feb 13 '17 at 01:19

0

you don't need to define "background-color",

just define background:

eg.

.classname{
    background: #00ff00;
}

answered Feb 13 '17 at 01:19

JordanH

190
5

score 0 · Accepted Answer · edited May 23 '17 at 12:24

To assign keyboard event to DOM (Document Object Model), you need to bind the event handler to the Document.

The simplest way to do it is via jQuery:

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

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

Pure JavaScript way to do (without 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 Code

You can check the keycode at http://keycode.info/ interactively.

One more thing

If you are asking two questions try to split them into two.

`keypress`, `e.which` and `e.keyCode` are all deprecated. `keydown` and `e.key` or `e.code` should be used instead, which also make the code easier to understand. Just keep in mind some old browsers used some non-standard codes, so left is usually `'LeftArrow'` and right is `'RightArrow'`, but on IE and Legacy Edge they would be `'Left'` and `'Right'` instead. Also, take a look at https://keyjs.dev. I will add information about these kinds of cross-browser incompatibilities soon! — Danziger, Sep 27 '20 at 18:43

HTML Clickable drum set, can't set the background color in CSS/HTML/ how can I assign keyboard keys to HTML buttons?

2 Answers2