|
|
Posted by Omar on 09/13/06 19:08
Okay I've worked hard some friends to create two things....
1) javascripts that understand what the different notes of the keyboard
are, and how to contruct a musical scale
2) an HTML table, done with a WYSIWIG editor, that displays (among
other things) two rows of 7 boxes
what I want to do is display the output of the javascript code, which
is seven notes (it currently displays it an alert box) in the lower
seven boxes.
Here is the HTML code for the table:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"
/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<title>// OSA’s Project //
</title>
<script type="text/javascript">
</script>
<style type="text/css">
a { color:inherit; }
a:hover { color:inherit; text-decoration:overline; }
body { background-color:#FFFFFF; color:#000000; direction:ltr;
font-family:verdana; font-size:85%; }
table { background-color:inherit; border:#000000 1px solid;
color:inherit; }
td { width:40px; }
td#timer { font-size:75%; text-align:right; width:320px; }
td#txt_intview { font-weight:bold; vertical-align:top; width:120px; }
td#txt_intv-state { font-size:66%; width:200px; }
</style>
</head>
<body>
<table border="" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3" id="txt_intview">Interval Viewer</td>
<td colspan="5" id="txt_intv-state">You are currently working with
[1] key. You are flirting with [0] keys.</td>
</tr>
<tr>
<td>Key</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<td>
<select name="key_root_note">
<option>C</option>
<option>C#</option>
<option>D</option>
<option>D#</option>
<option>E</option>
<option>F</option>
<option>F#</option>
<option>G</option>
<option>G#</option>
<option>A</option>
<option>A#</option>
<option>B</option>
</select>
</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
</table>
</body>
</html>
and here is the javascript that I want to embed:
<html>
<head>
<title>Notes.htm</title>
<script type="text/javascript">
var arr1 = new Array();
var arr2 = new Array();
function build() {
var note = "C,Db,D,Eb,E,F,Gb,G,Ab,A,Bb,B";
var html = "<form name='form1'>";
html += "Notes: <select name='Notes'>\n";
html += "<option value=''></option>\n";
var itm1 = note.split(",");
for (var i=0; i<itm1.length; i++) {
arr1[i] = itm1[i];
html += "<option value='" + i + "'>" + arr1[i] + "</option>\n";
}
var itm2 = (note+","+note+","+note).split(",");
for (var j=0; j<itm2.length; j++) {
arr2[j] = itm2[j];
}
html += "</select>\n";
html += " \n";
html += "Scale: <select name='Scale'>\n";
html += "<option value=''></option>\n";
// html += "<option value='1'>Minor</option>\n";
html += "<option value='2'>Major</option>\n";
html += "</select>\n";
html += " \n";
html += "<input type='button' value='Scale Intervals'
onclick='chords()'>\n";
html += "</form>\n";
document.getElementById("html").innerHTML = html;
}
function chords() {
var form = document.form1;
var valu = form.Notes.options[form.Notes.selectedIndex].value;
// var scal = form.Scale.options[form.Scale.selectedIndex].value;
var next = parseInt(valu,10);
var what = arr1[next];
if (what == "") return;
var patt = [2,2,1,2,2,2,1];
for (var k=0; k<patt.length; k++) {
next += patt[k];
what += " " + arr2[next];
}
alert(what);
}
window.onload=build;
</script>
</head>
<body>
<div id="html"></div>
</body>
</html>
can someone advise me on getting that info into those boxes, instead of
in an alert?
thank you so much!
[Back to original message]
|