How to connect input filed, button, and function JS

Question

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>

Mayukh Chakraborty · Accepted Answer · 2021-09-03 17:44:21Z

1

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

answered Sep 3, 2021 at 17:44

Mayukh Chakraborty

1758 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nemanja Ilic Over a year ago

@DevMayuhk do you have idea how can i after result of this code get a result of sum every character by that column

Nemanja Ilic Over a year ago

for example string=nemanaili, result of this code is then nem/ana/ili how can i now do nai/eni/mai in same row

Mayukh Chakraborty · Accepted Answer · 2021-09-03 17:04:39Z

0

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>

answered Sep 3, 2021 at 17:04

Mayukh Chakraborty

1758 bronze badges

8 Comments

Andy Over a year ago

You should go into a little detail about what you've changed, and why.

Nemanja Ilic Over a year ago

But still when i run program i get result of "GEEKSFORGEEKS" not what i put in the input field...

Mayukh Chakraborty Over a year ago

Can you describe exactly what you want to do?

Nemanja Ilic Over a year ago

When i put in let str = myText; i get result of string not this "SQUARE CODE"

Mayukh Chakraborty Over a year ago

@NemanjaIlic So you want to apply the grid function to the string in the input field?

|

Collectives™ on Stack Overflow

How to connect input filed, button, and function JS

2 Answers 2

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related