Estoy aprendiendo JS en este momento, y no sé cómo conectar el archivo de entrada, el botón y la función. En el código actual, si lo ejecuto, obtengo el resultado de una cadena específica que está en el código, por lo que quiero ingresar una cadena aleatoria en el campo de entrada, y cuando hago clic en el botón, obtengo el resultado de esa cadena de entrada.
<input type="text" id="myText" value="String"> <p>Click the "Try it" button</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myText").value; document.getElementById("demo").innerHTML = x; let l = str.length; let k = 0, row, column; row = Math.floor(Math.sqrt(l)); column = Math.ceil(Math.sqrt(l)); if (row * column < l) { row = column; } let s = new Array(row); for (let i = 0; i < row; i++) { s[i] = new Array(column); for (let j = 0; j < column; j++) { s[i][j] = 0; } } // convert the string into grid for (let i = 0; i < row; i++) { for (let j = 0; j < column; j++) { if(k < str.length) s[i][j] = str[k]; k++; } } // Printing the grid for (let i = 0; i < row; i++) { for (let j = 0; j < column; j++) { if (s[i][j] == 0) { break; } document.write(s[i][j]); } document.write("</br>"); } } let str = "GEEKSFORGEEKS"; gridStr(str); } </script>Lo tengo. Ahora, ha escrito un código innecesario allí.
<body> <input type="text" placeholder="Enter Any String" id="str-to-grid"> <br> <button onClick="stringToGrid()">Try It</button> <p id="grid-placeholder"></p> <script> const Input = document.getElementById("str-to-grid") const Placeholder = document.getElementById("grid-placeholder") function stringToGrid() { //first, let's determine the number of rows and columns we can arrange //Usually, in grid, x = y, meaning sqrt(length) var dimension = Math.ceil(Math.sqrt(Input.value.length)) //Now let's arrange our string: var GridView = [] for ( let stringPtr = 0, dimensionPtr = 0; stringPtr < Input.value.length; stringPtr++) { GridView.push(Input.value[stringPtr]) if ( (dimensionPtr + 1)%dimension === 0 ) { GridView.push("<br />") } dimensionPtr++; } Placeholder.innerHTML = GridView.join("") } </script> </body>Lo que hace este código es cada vez que hace clic en el botón, se toma el marcador de posición y el valor, y la dimensión de la cuadrícula se calcula al cuadrado superior de la longitud de la cadena.
Luego hay una matriz separada, se coloca cada uno de los elementos de la cadena y, cuando finaliza la fila, se agrega una etiqueta br. de esta manera, se puede crear una vista de cuadrícula
Este es el código mejorado: (funcionará)
<input type="text" id="myText" value="String"> <p>Click the "Try it" button</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myText").value; document.getElementById("demo").innerHTML = x; let l = str.length; let k = 0, row, column; row = Math.floor(Math.sqrt(l)); column = Math.ceil(Math.sqrt(l)); if (row * column < l) { row = column; } let s = new Array(row); for (let i = 0; i < row; i++) { s[i] = new Array(column); for (let j = 0; j < column; j++) { s[i][j] = 0; } } // convert the string into grid for (let i = 0; i < row; i++) { for (let j = 0; j < column; j++) { if(k < str.length) s[i][j] = str[k]; k++; } } // Printing the grid for (let i = 0; i < row; i++) { for (let j = 0; j < column; j++) { if (s[i][j] == 0) { break; } document.write(s[i][j]); } document.write("</br>"); } } let str = "GEEKSFORGEEKS"; gridStr(str); </script>