如何循环 5 个不同输入的输出？我想让输出循环，以便输出 5 组答案

【问题标题】：How do I loop the output of 5 different inputs? I want to get the output looped so that 5 sets come out如何循环 5 个不同输入的输出？我想让输出循环，以便输出 5 组
【发布时间】：2020-11-18 22:53:58
【问题描述】：

如何循环 5 个不同输入的输出？我想让输出循环，以便输出 5 组。这是我尝试过的：我正在尝试将此部分与其他 4 个用户输入部分一起循环。

 <input id="myInput" type="text">
 




 <button onclick="myFunction()">See your trip</button>

 <p id="output1"></p>


 <script>
 function myFunction() {
 A = 0;
 B = 450;
 C = 590;
 D = 710;
 E = 1030;
 F = 1280;
 G = 1360;
 var startDistance;
 var inputLine = document.getElementById("myInput").value;


  for(i = 0; i < 5; i++) {

  switch(inputLine[0]) {
  case "A":
    startDistance = A;
    break;
   case "B":
    startDistance = B;
  break;

case "C":
startDistance = C;
break;

【问题讨论】：

使用+= 而不是= 所以你追加到字符串而不是替换。
^ 在循环中，而不是在最终分配中
好吧，我做到了，5套出来了，太棒了！但是，我希望根据用户输入输出 5 个不同的集合。我该怎么做？
检索用户输入inside循环，
我想这样做，但我对 4 个输入使用了 switch 语句，而我的 1 个输入直接从输入中获取。我该怎么做？

标签： javascript html loops

【解决方案1】：

好吧，对于初学者来说...看来您的代码格式不正确，前提是您没有显示所有代码，看起来就是这种情况。

还有这个奇怪的 sn-p inputLine[0]... 是否有一个输入将数组作为值保存？

function myFunction()
{
    A = 0;
    B = 450;
    C = 590;
    D = 710;
    E = 1030;
    F = 1280;
    G = 1360;
    var startDistance;
    var inputLine = document.getElementById("myInput").value;

    for(i = 0; i < 5; i++)
    {
        switch(inputLine[0])
        {
            case "A":
                startDistance = A;
                break;
            case "B":
                startDistance = B;
                break;
            case "C":
                startDistance = C;
                break;
        }
    }
}

话虽如此……这段代码可以更动态地编写，其想法是为所有输入提供相同的类名，使用 javascript 的 document.getElementsByClassName() 选择器选择这些输入，然后循环遍历这些值那些。例如：

    function newDistanceInput()
    {
        var container = document.getElementById("input-container");
        var newInput = "<span><input type='number' class='DistanceInput' oninput='if (this.value < 0) {this.value = 0;} calculateDistance();' value='0' /><span onclick='this.parentNode.remove(); calculateDistance();'>remove</span><br></span>";
        container.innerHTML += newInput;
        calculateDistance();
    }

    function calculateDistance()
    {
        distInputs = document.getElementsByClassName('DistanceInput');
        totalLength = 0;
        for (var i = 0; i < distInputs.length; i++)
        {
            totalLength += parseInt(distInputs[i].value);
        }
        document.getElementById('total-length').innerText = totalLength;
    }

    <html>
    <body>
        <div>
            <button onclick="newDistanceInput();">
                Add another distance input
            </button>
            <br>
            <div id="input-container">
            </div>
            <div id="total-length">
            </div>
        </div>
    </body>
    </html>

---编辑---

如果你指的是如何编辑这篇文章，你可以回到页面顶部，在你的问题之后，你会看到：

编辑按钮在它的下方。从那里，在您输入的文本框中，您可以通过以下方式设置相同的可运行示例：

点击带圆圈的按钮。

【讨论】：

@user14664932 ，我刚刚更新了示例代码，希望能帮助展示我的想法。
有没有办法分享我的整个代码？当我试图把它全部放进去时，它不会让我。当试图帮助的人看不到整个画面时，很难得到我问题的正确答案。我基本上有 4 个 switch 语句，我想知道你所说的关于 document.getElementByClassName 是否仍然成立。感谢您的回复。
你的意思是它不会让你把它都放进去？您可以在编辑部分创建一个可运行的 sn-p，这对我们非常有帮助......我将把这一切都包括在我的答案中。