Search Results

Search found 1 results on 1 pages for 'myfavoritenoisemaker'.

Page 1/1 | 1 

  • Using JavaScript, how do I write the same text to multiple HTML elements, or how do I write text to all HTML elements of the same class?

    - by myfavoritenoisemaker
    I am writing this program to take a root music note and populate tables with various scales from that root note. So, many of the tables cells will have the exact same value in them. I realize I can call my "useScale" function for every single that I need to write text to but since there will be repeats, it seemed like there should be a way to run my function once and apply the results to multiple but it did not work to use the document.getElementsByClassName("").innerHTML, I had been using "ById" which worked fine but each ID must be unique so, I can't write to multiple elements. Here's my code, I'd love some suggestions. many thanks Root Note <input type="text" name="defineRootNote" id="rootNoteCapture" size="2"/> <button onclick="findScale()">Submit</button> <table id="majorTriad"> <th>Major Triad</th> <tr><td>1st</td><td class="root"> </td></tr> <tr><td>3rd</td><td class="3rd"> </td></tr> <tr><td>5th</td><td class="5th"> </td></tr> </table> <table id="minorTriad"> <th>Minor Triad</th> <tr><td>1st</td><td class="root"> </td></tr> <tr><td>3 Flat</td><td class="3Flat"> </td></tr> <tr><td>5th</td><td class="5th"> </td></tr> </table> <script type="text/javascript"> function findScale(rootNote){ var rootNote = document.getElementById("rootNoteCapture").value; rootNote = rootNote.toUpperCase(); var scaleCheck = ["A", "A#", "AB", "B", "BB", "C", "C#", "D", "D#", "DB", "E", "EB", "F", "F#", "G", "G#", "GB"]; if (scaleCheck.indexOf(rootNote) == -1) { document.getElementById("root").innerHTML = "Invalid Entry"; } else { switch(rootNote){ case "AB": rootNote = "G#"; break; case "BB": rootNote = "A#"; break; case "DB": rootNote = "C#"; break; case "EB": rootNote = "D#"; break; case "GB": rootNote = "F#"; break; rootNote = rootNote; } document.getElementsByClassName("root").innerHTML = rootNote; document.getElementsByClassName("3rd").innerHTML = useScale(rootNote, 4); document.getElementsByClassName("5th").innerHTML = useScale(rootNote, 7); document.getElementsByClassName("3Flat").innerHTML = useScale(rootNote, 3); } } function useScale(startPoint, offset){ var scale = ["A", "A#", "B", "C", "C#", "D", "D#", "E", "F", "F#", "G", "G#"]; var returnNote = null; var scalePoint = scale.indexOf(startPoint); for (var i = 0; i < offset; ){ i = i + 1; //console.log(i); //console.log(scalePoint); scalePoint ++; if (scalePoint > 11) {scalePoint = 0;} } returnNote = scale[scalePoint]; return returnNote; } </script>

    Read the article

1