Comencé a crear un programa donde se necesita una entrada de un usuario, luego, dependiendo de la entrada, mostrará un triángulo rectángulo o un cuadrado (triángulo para par, cuadrado para impar) El patrón estará en orden descendente a partir de la entrada número. Sin embargo, mi código no produce ningún resultado.
Producción:
triángulo (3 es el número de entrada)
3 3 3 2 2 1cuadrado (3 es el número de entrada)
3 3 3 2 2 2 1 1 1¿Falta algo en mi código? Gracias
<!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>tiene algunos errores en su código, primero no ve ningún contenido porque nunca crea un elemento dom y lo agrega a html, luego no lee el valor de la entrada, sus bucles tienen algunos errores de variables indefinidas, y coloque siempre su secuencia de comandos js al final del cuerpo, porque necesita que se representen todos los elementos html antes de que se ejecute su js porque no tiene un valor indefinido cuando lo hace document.getElementById, hice un ejemplo completo con un nuevo código que logra los objetivos, solo léelo y notarás la diferencia y los errores que tienes, paz perro!
<!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>