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?

Posted by myfavoritenoisemaker on Stack Overflow See other posts from Stack Overflow or by myfavoritenoisemaker
Published on 2014-08-21T04:00:49Z Indexed on 2014/08/21 4:20 UTC
Read the original article Hit count: 108

Filed under:
|
|

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>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html