CODEWITHSUNDEEP
javascripthtml
Gary Kukat
Gary Kukat

Reputation: 79

Displaying a Grid Through a Function Using For Loops

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>

Upvotes: 0

Views: 850

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

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>

Upvotes: 2

Related Questions