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>
