Create triangle and square pattern with input js-CodePudding

I started creating a program in where an input from a user is needed, then, depending on the input, will display either a right triangle or square (triangle for even, square for odd) The pattern will be in descending order starting from the input number. However, my code does not yield any output.

Output:

triangle (3 is the input number)

3 3 3
2 2 
1

square (3 is the input number)

3 3 3
2 2 2 
1 1 1

Is there something missing in my code? Thanks

    <!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>

CodePudding user response：

you have some errors over your code , first you don't see any content because you never create a dom element and append to html ,then you don't read the value of the input, your loops have a some errors of undefined variables,and put always your js script at the end of the body, because you need to all html elements be rendered before your js be executed for dont have undefined value when you do you document.getElementById, i made a full example with a new code that achieve the goals , just read it and you will notice the difference and the errors that you have , peace dog!

<!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>