有人可以帮我修复嵌套循环的底部两行吗?它们的长度不应该相同,但它们是

Can someone help me fix the bottom two rows of my nested loop? They shouldn't be the same lengths, but they are

我正在做一个项目,我想在其中创建以下模式:

X
XX
XXX
XXXX

..等等。总共有二十行,第二十行应该有 20 个 X。这是我想出的非常接近的结果:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="xloop();">Accept</button> <br>
<p id="xloops"></p>

<script>
function xloop() {
let text = "";
for (j=2; j<=20; j++) {
text+= ("X") + ("<br>");
for (k=1; k<j; k++) {
text += ("X");
}
}
document.getElementById("xloops").innerHTML = text;
}
</script>
</body>
</html>

模式以适当的方式开始并按照我的要求进行,直到最后一行。第 20 行只有 19 个元素,而不是必要的 20 个。我觉得这与 k 循环中的“j

我认为以下内容会对您有所帮助:

<!DOCTYPE html>
<html>
<body>
    <button type="button" onclick="xloop()">Accept</button> <br>
    <p id="xloops"></p>
    <script>
        function xloop() {
            let text = "";
            for (let j = 0; j < 20; j++) {
                let text2 = "";
                for (let k = 0; k <= j; k++) {
                    //row
                    text2 += "X"; 
                }
                //line
                text += `${text2}` + "<br>"
            }
            document.getElementById("xloops").innerHTML = text;
        }
    </script>
</body>
</html>