Question

我正在编写此程序以获取根音符并从该根音符中填充各种比例的表格。因此，许多表格单元格中将具有完全相同的值。我意识到我可以打电话给我的＆＃34; useScale＆＃34;我需要写入文本的每一个函数，但由于会有重复，似乎应该有一种方法来运行我的函数一次并将结果应用于多个但是它无法使用document.getElementsByClassName（＆＃34;＆＃34;）。innerHTML，我一直在使用＆＃34; ById＆＃34;哪个工作正常，但每个ID必须是唯一的，所以，我不能写入多个元素。这是我的代码，我喜欢一些建议。非常感谢

            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>

Answer 1

您可以遍历由getElementsByClassName()收集的元素。

var myElements = document.getElementsByClassName("className"); //assign this class name to each of the elements you want to work with
for(i = 0; i < myElements.length; i++)
{
     myElements[i].innerHTML = "value to set";
}

Answer 2

如果你想使用vanilla，定义一对帮助者可以使特定任务和其他相关任务变得更加简单：

function $(css){return [].slice.call(document.querySelectorAll(css));}
function setProp(a){ a[this[0]]=this[1]; };


   $(".root") // gather all elms matching this selector
   .forEach(  // functional for-loop replacement
     setProp,     // run the setProp function to set properties on all matches
     ["innerHTML", "Hello World"] // define the property name and value to be set
   );

    // or  more succinctly:
 $(".root").forEach(setProp, ["innerHTML", "Hello World"]);

//you can do something else to a different set without re-coding a loop:
 $(".3rd").forEach(setProp, ["title", "Hola Amigo"]);

使用2行jQuery替换，我们得到链接和可重用性，这两个使得这个任务在jQuery中变得微不足道。

使用JavaScript，如何将相同的文本写入多个HTML元素，或者如何将文本写入同一类的所有HTML元素？

2 个答案: