1.musical_dyn_keys.css
.musicalKeys{
background-color:#ffe0d0;
border:solid maroon 2px;
position:absolute;
overflow:auto;
margin:4px;
}
.toplong{
width:536px;
height:68px;
top:24px;
left:24px;
}
.sidebar{
width:100px;
height:400px;
top:24px;
left:570px;
}
.musicalButton{
border:solid navy 1px;
width:60px;
height:60px;
position:relative;
margin:2px;
float:left;
}
.do{background-color:red;}
.re{background-color:orange;}
.mi{background-color:yellow;}
.fa{background-color:green;}
.so{background-color:blue;}
.la{background-color:indigo;}
.ti{background-color:violet;}
div.console{
font-family:arial,helvetica;
font-size:16px;
color:navy;
background-color:white;
border:solid navy 2px;
width:536px;
height:320px;
top:106px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}
2.musical_dyn_keys.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Two Keyboards</title>
<LINK rel='stylesheet' type='text/css' href='musical_dyn_keys.css'/>
<SCRIPT type='text/javascript' src='musical_dyn_keys.js'></SCRIPT>
<SCRIPT type='text/javascript'>
window.onload=assignKeys
</SCRIPT>
</head>
<body>
<DIV id='keyboard-top' class='toplong musicalKeys'></DIV>
<DIV id='keyboard-side' class='sidebar musicalKeys'></DIV>
<DIV id='console' class='console'></DIV>
</body>
</html>
3.musical_dyn_keys.js
var notes = new Array("do","re","mi","fa","so","la","ti","do");
function assignKeys(){
var candidates = document.getElementsByTagName("DIV");
if(candidates){
for(var i=0;i<candidates.length;i++){
var candidate = candidates[i];
if(candidate.className.indexOf('musicalKeys')>=0){
makeKeyboard(candidate);
}
}
}
}
function makeKeyboard(el){
for(var i=0;i<notes.length;i++){
var key=document.createElement("DIV");
key.className = notes[i] + " musicalButton";
alert(key.className);
key.note = notes[i];
key.onclick = playNote;
el.appendChild(key);
}
}
function playNote(event){
var note = this.note;
var console = document.getElementById('console');
if(note && console){
console.innerHTML +=note + ".";
}
}