Question

我不明白为什么此代码不起作用，请您能帮我吗？我希望当您单击按钮时，“ 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>

Answer 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。

Answer 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>

Answer 3

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

现在工作正常：）

用JS将循环写入html div

3 个答案: