使用输入js创建三角形和正方形图案

Question

我开始创建一个需要用户输入的程序，然后，根据输入，将显示直角三角形或正方形（三角形表示偶数，正方形表示奇数）图案将呈降序排列顺序从输入的数字开始。但是，我的代码没有产生任何输出。

输出：

三角形（3为输入数）

3 3 3
2 2 
1

平方（3为输入数）

3 3 3
2 2 2 
1 1 1

我的代码中是否缺少某些内容？谢谢

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style> 
    </style>
    <script>
    function myFunction() {
    var number;
        console.info("Number:" + number);
        if (number %2 == 0)  {                       
    var line = document.getElementById("list")
            for (let n = 1; n <= number; --i) {
                let line = "";
                for (let r = 1; r <= n; ++j) {
                    line += (j + " ");
                }
                document.getElementById("line");
            }
    
        } else {                              
    var line = document.getElementById("list")
            for (let n = 1; n <= number; i++) {
                let line = "";
                for (let r = 1; r <= number; j++) {
                    line += (j + " ");
                }
                document.getElementById("line");
            }
        }
        
    }
    </script>
  </head>
  <body>
    </br>
        Enter the number : <input id="number" type="number"/> 
    <br />
    <button onclick="myFunction()">Print</button>
    <div id="line">
</body>
</html>

Answer 1

您的代码有一些错误，首先您看不到任何内容，因为您从未创建 dom 元素并附加到 html，然后您没有读取的值输入，您的循环有一些未定义变量的错误，并且始终将您的 js 脚本放在主体的末尾，因为您需要在执行 js 之前呈现所有 html 元素，因为当你做到了 document.getElementById，我用实现目标的新代码做了一个完整的例子，只要阅读它，你就会发现其中的区别和错误，和平狗！

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .clear {
            clear: both;
        }

        .float-left {
            float: left;
            height: 20px;
            width: 20px;
            vertical-align: middle;
            line-height: 20px;
            text-align: center;
            border: 1px solid green;
        }

        .triangle {
            -moz-transform: skew(45deg);
            -webkit-transform: skew(45deg);
            transform: skew(45deg);
        }
    </style>


</head>

<body>
    </br>
    Enter the number : <input id="number" type="number" />
    <br />
    <button onclick="init()">Print</button>
    <div id="figure">
    </div>
    <script>


        let figureContainer = document.getElementById('figure');



        function drawLine(number, lengthOfLine, typeOfFigure) {

            for (let i = 0; i < lengthOfLine; i++) {
                let numberIOfLine = document.createElement("div");
                numberIOfLine.innerHTML = number;
                if (typeOfFigure === "triangle") {
                    numberIOfLine.className = "float-left ";
                } else {
                    numberIOfLine.className = "float-left";
                }

                figureContainer.appendChild(numberIOfLine);
            }
            let clearLine = document.createElement("div");
            clearLine.className = "clear";
            figureContainer.appendChild(clearLine);
        }
        function drawSquare(number) {
            for (let i = 0; i < number; i++) {
                drawLine(number - i, number, "square");
            }
        }
        function drawTriangle(number) {
            for (let i = 0; i < number; i++) {
                drawLine(number - i, number - i, "triangle");
            }
        }
        function init() {
            figureContainer.innerHTML = "";
            let number = document.getElementById("number").value;
            if (number % 2 === 0) {
                drawSquare(number);
            } else {
                drawTriangle(number);
            }
        }
    </script>
</body>

</html>

使用输入js创建三角形和正方形图案

Create triangle and square pattern with input js

html

javascript