i am learning JS right now, and I don't know how to connect input filed, button, and function. In currently code if I run it i get result of specific string which is in code, so i want to enter random string in input field, and when i click on button get result of that input string.
<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>
I got it. Now, you have written unnessesary code there.
<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>
What this code does is everytime you clicked the button, the placeholder and the value is taken, and the dimension of the grid is calculated to the upperbound square of the length of the string.
Then is a seperate array, each of the string item is placed, and when the row ends, a br tag is added. this way, a grid view can be created
This is the improved code: (it will work)
<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>