用JS在html div中写一个循环答案

【问题标题】：write a loop into html div with JS用JS在html div中写一个循环
【发布时间】：2018-12-11 19:33:56
【问题描述】：

我不明白为什么这段代码不起作用，你能帮帮我吗？我希望当您单击按钮时，“theloop” div 会充满 yo 0 ， yo 1 等...直到您输入的数字

<p>
    enter how many time you want the loop to repeat 
    <input id="nloop">
</p>
</br>

<button onclick="displayLoop()">
    Try it
</button>

<p id="theloop"></p>

<script>
    var nloop   = document.getElementById("nloop").value;
    var theloop = document.getElementById("theloop")

    function displayLoop () {
        for (var i=0; i<nloop; i++) {
            theloop.innerHTML = "yo" + i;
        }
    }
</script>

【问题讨论】：

什么不起作用？你的代码应该做什么，它现在在做什么？请仔细解释
在 </script> 之前缺少右括号 }
displayLoop后面还有()缺失
您有很多语法错误，请阅读如何编写函数和 for 循环，函数声明中的 () 丢失，for 中的右括号丢失。

标签： javascript loops innerhtml

【解决方案1】：

你有很多语法错误+代码错误

<p>enter how many time you want the loop to repeat <input id="nloop"></p>   </br>

<button onclick="displayLoop()">Try it</button>

<p id="theloop"></p>

<script>
    var theloop = document.getElementById("theloop")

    function displayLoop(){
        var nloop = document.getElementById("nloop").value;
        theloop.innerHTML = '';
        for (var i=0; i<nloop; i++){
            theloop.innerHTML = theloop.innerHTML + "yo" + i+ "<br/>";
        }
    }
</script>

你需要在调用函数时获取nloop的值，否则该值将是脚本加载时的值，所以是一个空值。如果你影响了 innerHtml 的内容，它会删除 innerHtml 的内容。

我只为你可以忽略的样式添加了 BR。

【讨论】：

我修改了答案并添加了 theloop.innerHTML = '';如果需要，重新初始化 html 内容。感谢接受答案:)
您应该在“使用 javascript”上修改您的问题，您使用的是 javascript 而不是 CSS，CSS 用于为您的页面提供样式。您正在脚本标签中编写 JS ;)

【解决方案2】：

您错过了一些我已更正的语法检查：

<p>enter how many time you want the loop to repeat <input id="nloop" /></p>   

</br>

<button onclick="displayLoop();">Try it</button>

<p id="theloop"></p>

    <script>                  
        var theloop = document.getElementById("theloop");

        function displayLoop () {
            var nloop = document.getElementById("nloop").value;
            for (var i=0; i<nloop; i++)
             {
                theloop.innerHTML = "yo" + i;
             }
        }
    </script>

【讨论】：

【解决方案3】：

<script>
   function displayLoop()
   {
        var nloop = document.getElementById("nloop").value;
        for (var i=0; i<nloop; i++)
        {
            document.getElementById("theloop").innerHTML += "yo" + i;
        }   
   }
</script>

现在一切正常:)

【讨论】：