Embed Javascripts within HTML Tables

Discussion in 'HTML' started by Omar, Sep 13, 2006.

  1. Omar

    Omar Guest

    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&rsquo;s Project //
    </title>

    <script type="text/javascript">
    </script>

    <style type="text/css">


    a { color:inherit; }
    a:hover { color:inherit; text-decoration:eek:verline; }


    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 = itm1;
    html += "<option value='" + i + "'>" + arr1 + "</option>\n";

    }
    var itm2 = (note+","+note+","+note).split(",");
    for (var j=0; j<itm2.length; j++) {
    arr2[j] = itm2[j];
    }
    html += "</select>\n";
    html += "&nbsp;\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 += "&nbsp;\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!
    Omar, Sep 13, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bob Walton
    Replies:
    0
    Views:
    910
    Bob Walton
    Jul 19, 2003
  2. Otuatail

    Tables within tables

    Otuatail, Jul 31, 2004, in forum: HTML
    Replies:
    7
    Views:
    492
  3. Failure
    Replies:
    1
    Views:
    1,112
    Failure
    Sep 7, 2003
  4. Elmo Watson
    Replies:
    1
    Views:
    596
    Eliyahu Goldin
    May 8, 2007
  5. lilostitch

    How to access signed javascripts from html?

    lilostitch, Dec 16, 2005, in forum: Javascript
    Replies:
    0
    Views:
    93
    lilostitch
    Dec 16, 2005
Loading...

Share This Page