Элементы DOM (Узлы) - PullRequest
Новая
       12

Элементы DOM (Узлы)

0 голосов
/ 23 марта 2020

Я новичок в JS, я пытался написать простой для l oop. но это не работает Я хочу, чтобы al oop написал this is the paragraph 1, this is the paragraph 2, ...

Это мой код: 

<body>

    <button id="makeP">Make yours paragraphs</button>

    <div id="block">
        <p></p>
    </div>

    <script>
        document.getElementById("makeP").onclick = makeParagraph;

        function makeParagraph() {
            var text = "this is the paragraph ";
            var i;
            for (i = 0; i < 11; i++) {
                var para = document.createElement("p");
                var node = document.createTextNode(text + i);
                para.appendChild(node);
                var element = document.getElementById("block");
                element.appendChild(para);
            }
        }


    </script>

</body>

Я пытаюсь с document.write(), но после нажатия на кнопку у меня есть все строки с текст, но кнопка удаляется;

Я пытаюсь: 

    <script>
        document.getElementById("makeP").onclick = makeParagraph;

        function makeParagraph() {
            var text = "this is the paragraph ";
            var i;
            for (i = 0; i < 11; i++) {
                var para = document.createElement("p");
                var node = document.createTextNode(text + i);
                para.appendChild(node);
                var element = document.getElementById("block");
                element.appendChild(para);
            }
        }


    </script>

Это работает, но я не знаю, как использовать br для различения guish различных строки после каждого l oop.

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Ваша проблема в том, что при каждом нажатии кнопки вы запускаете целую l oop - каждый раз, когда вы нажимаете кнопку, она запускается от начала до конца. Я предполагаю, что вы хотите печатать один абзац за раз, увеличивая счетчик одновременно на один.

Вы можете использовать функцию обратного вызова, которая использует внешнюю переменную, чтобы узнать, что такое последовательный абзац число вроде этого: 

let i = 1;
document.getElementById("makeP").onclick = () => {
    if (10 >= i) { // limit the number of paragraphs to 10
        return;
    }
    const text = "this is the paragraph ";
    const para = document.createElement("p");
    const node = document.createTextNode(text + i);
    para.appendChild(node);
    const element = document.getElementById("block");
    element.appendChild(para);
    ++i;
}

Также рекомендуется объявлять токены, значение которых не изменится в вашей программе, как константы. Каждый абзац уже должен быть в отдельной строке, так как абзац html отображается как блок в браузере, поэтому он будет занимать всю ширину родительского контейнера (здесь весь документ).

Надеюсь, это поможет, удачи в обучении JS!

0 голосов
/ 23 марта 2020

Вот код, в котором тег 'hr' создается при каждом нажатии.

EDITED

Теперь с тегом hr, каждый клик будет иметь новый цвет фона. 

 document.getElementById("makeP").onclick = makeParagraph;

        function makeParagraph() {
          //For coloring
          const r = Math.floor(Math.random() * 256);
          const g = Math.floor(Math.random() * 256);
          const b = Math.floor(Math.random() * 256);

          //creating a wrapper
          wrapper = document.createElement("div");
          wrapper.classList.add("color");
          wrapper.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
          document.getElementById("block").appendChild(wrapper);

          var text = "this is the paragraph ";
          let i;
          for (i = 0; i < 11; i++) {
            var para = document.createElement("p");
            var node = document.createTextNode(text + i);
            para.appendChild(node);
            wrapper.appendChild(para);
          }

          wrapper.appendChild(document.createElement("hr"));
        }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <body>
      <button id="makeP">Make yours paragraphs</button>

      <div id="block"></div>

    </body>
  </body>
</html>

С циклами while и do-while 

         //Do while loop

          do{
            var para = document.createElement("p");
            var node = document.createTextNode(text + i);
            para.appendChild(node);
            wrapper.appendChild(para);

            i++;
          }while (i<11);



         /*  

         //While loop
          while (i<11){
            var para = document.createElement("p");
            var node = document.createTextNode(text + i);
            para.appendChild(node);
            wrapper.appendChild(para);

            i++;
          } 
          */



          //For Loop
          /* for (i = 0; i < 11; i++) {
            var para = document.createElement("p");
            var node = document.createTextNode(text + i);
            para.appendChild(node);
            wrapper.appendChild(para);
          } */
...