Displaying a Grid Through a Function Using For Loops

Question

I am currently working on an assignment and am currently stuck. The program has the function function createGrid(). This function is supposed to create a grid with the variable letters based on what the user inputs for rows and columns in the input boxes on the form . letters is the entire alphabet in all caps. function createGrid() doesn't output anything and I have no syntax errors. The output of function createGrid() looks like the example below. The only function that works is function resetForm().Does anyone know where I went wrong?

Example how the function is supposed to work and what the output is supposed to look like: User entered 3 for rows and 30 for columns

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D 
Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C 
Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B

My Code Currently

<script>

function createGrid(){
            
            let script = "";
            let rows = document.getElementsByName("rows").value;
            let columns =  document.getElementsByName("columns").value;
            let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
            // outer for loop to display rows    
            for (let i = 0; i < rows; i++){
                script += letters.charAt(i);
    
               // inner for loop to display columns 
                for (let j =0; j < columns; j++){
                let k = (i * rows + j)% 26;
                script += letters.charAt(k);
             }   
             script += "<br>";
            }
            
            
            //creates grid and displays in the <pre> tag
            document.getElementById("results").innerHTML = script;
        }

function resetForm(){

            document.getElementsByName("myForm")[0].reset();
            rows = document.getElementsByName("rows").value; ;
            second = document.getElementsByName("columns").value;
            }
    </script>

<body>
    <h1>Letter Grid</h1>

    <form name="myForm">

        Number of Rows
        <!--prompts user to input number of rows -->
        <input type="number" name="rows" value="">
        Number of Columns
        <!--allows user to input number of columns-->
        <input type = "number" name="columns" value="" >
        <!--submit button to initiate function using users input-->
        <input type="button" value="Submit Values"  onclick="javascript:createGrid()">
        <!--resets the form so user can insert different numbers-->
          <input type="button" onclick="resetForm();" value="Reset the form" >

        <pre id="results"></pre>

    </form>
</body>

When trying to debug something, do the simplest thing you can think of. You've got a form, and some buttons, two functions, etc. spread across Javascript and HTML. Strip it down to a single function, a single div, and see if you can generate output (or even just output to the JS console at first). Then add the moving parts, slowly, one at a time. If you just try to wire up a bunch of code without running it you won't have any idea what's going wrong. — Jared Smith
– Jared Smith, Commented Nov 13, 2020 at 22:40

GrahamTheDev · Accepted Answer · 2020-11-13 22:44:25Z

2

document.getElementsByName returns an array of elements not a singular element.

As such you simply need to change it to document.getElementsByName("rows")[0].value and the same for columns.

Alternatively your could use querySelector which returns a singular item by targeting the name attribute using document.querySelector('input[name="rows"]').value;.

I have included both in the following example.

Corrected fiddle

function createGrid(){
            
            let script = "";
            let rows = document.querySelector('input[name="rows"]').value; //changed this line to demonstrate querySelector
            let columns =  document.getElementsByName("columns")[0].value; //also changed this line to show how to select the first item in the array
            let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
            // outer for loop to display rows    
            for (let i = 0; i < rows; i++){
                script += letters.charAt(i);
    
               // inner for loop to display columns 
                for (let j =0; j < columns; j++){
                let k = (i * rows + j)% 26;
                script += letters.charAt(k);
             }   
             script += "<br>";
            }
            
            
            //creates grid and displays in the <pre> tag
            document.getElementById("results").innerHTML = script;
        }

function resetForm(){

            document.getElementsByName("myForm")[0].reset();
            rows = document.getElementsByName("rows").value; ;
            second = document.getElementsByName("columns").value;
            }

<body>
    <h1>Letter Grid</h1>

    <form name="myForm">

        Number of Rows
        <!--prompts user to input number of rows -->
        <input type="number" name="rows" value="">
        Number of Columns
        <!--allows user to input number of columns-->
        <input type = "number" name="columns" value="" >
        <!--submit button to initiate function using users input-->
        <input type="button" value="Submit Values"  onclick="javascript:createGrid()">
        <!--resets the form so user can insert different numbers-->
          <input type="button" onclick="resetForm();" value="Reset the form" >

        <pre id="results"></pre>

    </form>
</body>

edited Nov 13, 2020 at 22:44

answered Nov 13, 2020 at 22:38

GrahamTheDev

25.3k2 gold badges43 silver badges82 bronze badges

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

7 Comments

Gary Kukat Over a year ago

Ahhh ok I orignally had that but changed them all to document.getElementsByName. Quick question do you know why the output always displays two AAs at the beginning of grid ? Its the only time two AAs are displayed. The rest of the grid goes ABC... and so on

GrahamTheDev Over a year ago

yeah script += letters.charAt(i); outputs "A" and then in the loop let k = (i * rows + j)% 26; is also going to output "A" as i is 0 and j is 0.

Gary Kukat Over a year ago

oh ok. I understand now. How would I correct the double from occurring? should I change j to 1?

GrahamTheDev Over a year ago

That is more fun for you to try and work out, but I will give you a clue, at the moment you actually output an extra character per row due to the same issue.

Gary Kukat Over a year ago

thanks for the practice run. I see what I was doing wrong. I added the script+= twice when it really only needed to be in the inner for loop

|

Collectives™ on Stack Overflow

Displaying a Grid Through a Function Using For Loops

1 Answer 1

Corrected fiddle

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Corrected fiddle

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related