написать цикл в HTML Div с JS - PullRequest
Новая
       7

написать цикл в HTML Div с JS

0 голосов
/ 03 июля 2018

Я не понимаю, почему этот код не работает, не могли бы вы помочь мне, пожалуйста? Я хочу, чтобы когда вы нажимали на кнопку, div "theloop" заполнялся 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>

Ответы [ 3 ]

0 голосов
/ 03 июля 2018

У вас много синтаксических ошибок + кодовая ошибка 

<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 только для стиля, который вы можете игнорировать.

0 голосов
/ 03 июля 2018 
<script>
   function displayLoop()
   {
        var nloop = document.getElementById("nloop").value;
        for (var i=0; i<nloop; i++)
        {
            document.getElementById("theloop").innerHTML += "yo" + i;
        }   
   }
</script>

Теперь все работает нормально:)

0 голосов
/ 03 июля 2018

Вы пропустили несколько проверок синтаксиса, которые я исправил: 

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