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 元素（節點）

問題描述

2 個解決方案

解決方案1
0 已采納 2020-03-23 14:52:43

解決方案2
0 2020-03-23 14:58:21

DOM 元素（節點）

問題描述

2 個解決方案

解決方案1 0 已采納 2020-03-23 14:52:43

解決方案2 0 2020-03-23 14:58:21

解決方案1
0 已采納 2020-03-23 14:52:43

解決方案2
0 2020-03-23 14:58:21