DOM 元素（节点）

Question

我是 JS 新手，我试着写了一个简单的 for 循环。但它不起作用。我想循环写 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 来区分每个循环后的不同行。

Answer 1

这里是每次点击都会创建一个 'hr' 标签的代码。

已编辑

现在有了 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);
          } */

Answer 2

您的问题是，每次单击按钮时，您都会运行整个循环 - 每次按下按钮时，它都会从头到尾运行。我假设您希望一次打印一个段落，同时将计数器递增一个。

您可以使用使用外部变量的回调函数来了解连续的段落编号，如下所示：

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 顺利！

DOM 元素（节点）

DOM Elements (Nodes)

javascript

appendchild