Printing multiplication table using arrays and nested for loops

Question

I am working on an assignment to create a multiplication table using a 2D array. This is what I came up with.

'use strict';

window.addEventListener('load', function () {
  document.getElementById('number1').addEventListener('focus', inputFocus);
  document.getElementById('number2').addEventListener('focus', inputFocus);
  document.getElementById('btn').addEventListener('click', main);
  document.getElementById('number1').focus();
});
function inputFocus() {
  document.activeElement.select();
  document.getElementById('error').innerText =
    'Enter ' + document.activeElement.id + ' value.';
}
function getNumber() {
  let multiplier = document.getElementById('number1').value;
  multiplier = Number(multiplier);
  return multiplier;
}
function getExpressionsNumber() {
  let expressionsNumber = document.getElementById('number2').value;
  expressionsNumber = Number(expressionsNumber);
  return expressionsNumber;
}
// I have a good feeling that checkInput() does not work at all and is most likely redundant.
function checkInput() {
  let number = document.activeElement.value;
  console.log(number);
  if (isNaN(number) || number.trim().lenght == 0) {
    document.getElementById('error').innerText = 'Enter a number!';
    return false;
  }
  return true;
}
function main() {
  console.log('Main is called...'); // testing to see if this function is being called.
  console.log(checkInput()); // testing if this function returns true...
  if (checkInput()) {
    document.getElementById('error').innerText = ''; // set the error message to emptry string... good.
    displayExpressions(); // call the function to display the output...
  }
}

function multiplication(number, expressionsNumber) {
  let result = number * expressionsNumber;
  return result;
}

function displayExpressions(){
    let number1 = getNumber();
    // console.log(number1)
    let number2 = getExpressionsNumber();
    // console.log(number2)
    if (number1 <=0 || number2 <= 0){
        document.getElementById("error").innerText =  "Enter a natural number!" 
    }
    else if(number1 >= number2 ){
        document.getElementById("error").innerText =  "End value must be grater than Start value!" 
    }
    else{
    let result = [];
    for(let row = number1; row <= number2 + 1; row++) {
         result[row] = [];            
       for( let column = number1; column <= number2 + 1; column++){           
           if( row == number1 && column > number1){
               result[row][column] =  "<th>" + (column-1) + "</th>";
           }
           else if(column == number1 && row > number1){
               result[row][column] = "<th>" + (row - 1) + "</th>";
           }
           else if (row == number1 && column == number1){
               result [row][column] =  "<th>" + "x" + "</th>";
           }
           else{
           result[row][column] = "<td>" + (row - 1) * (column-1) + "</td>";
               document.getElementById("output").innerHTML = result[row][column];
           }
       }           
         result += "</tr>";      
     }
      document.getElementById("output").innerHTML = result[row];
     }
}  

*{
    box-sizing: border-box;
}

.fcontainer{
    display: flex;
}   

div.fcontainer{
    justify-content: space-between;
    flex-basis: 50%;
    margin: 15px;
    
}

body {
    margin: 40px;
    background-color: rgb(230, 255, 247);
    font-family: 'Roboto', sans-serif;
    font-size: calc(10px + (24 - 10) * (100vw - 300px) / (1600 - 300));
}

h1, h2 {
    text-align: center;
}

img {
    display: block;
    width: 300px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

p {
    margin: 10px 0px;
}

button {
    margin: 10px 0px;
}

div.calc {
    margin: 0 auto;
    display: block;
    width: 600px;
    background-color: rgb(33, 209, 150);
    padding: 20px;
    border-radius: 5px;
    text-align: center;

}


div.calc p {
    text-align: left;
    margin-left: 55px;
}

.calc input {
    width: 80%;
    text-align: right;
    border-radius: 3px;
    border: none;
}

div.cal h2,
 h3 {
    text-align: center;
}
#assignment6 div{
    margin-top: 10px;
}

div.calc div input,
div.calc div label{
    width: 45%;
display: inline-block;
text-align: right;



}

.calc button {
    margin-left: 355px;
    border-radius: 5px;
    border:2px solid #008CBA;
    color: black;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.calc button:hover {
    background-color: #008CBA;
    color: white;
}
.calc button:active {
    transform: scale(0.98);
    /* Scaling button to 0.98 to its original size */
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
    /* Lowering the shadow */
    
}
/* Assignment Listings Page start */

#mainPage{
    background-image: url(../images/keyboard.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 350px;

}
#header{
    flex-direction: column;
    background-color: #9b9ea1;
    color: #fff;
    max-width: 50%;
    margin: 0 auto;
    align-self: center;    
}
#header h1{
    margin: 1em;
}
#main div{
    padding: 10px;
    background-color: #9b9ea1;
    margin: 15px;
    width: fit-content;
}
#main a{
    padding: 5px;
    margin: 5px;
    color: #fff;

}


/* Assignment Listings Page  end */

/* assignment 3  */
 section.fcontainer{   
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around; 
   flex-direction: row;    
   align-items: stretch;
   margin: 0 auto;
   max-width: 2600px;
   padding: 10px;
   border: 1 solid black;
}
 section.fcontainer div{
    background-color: blanchedalmond;
    flex-basis: 45%;
    padding: 15px;
    margin: 0 15px;
}
/* Assignment Events. Activity 4. Shape area calculator Start*/
body>div{
    background-color: gray;
    padding: 10px;
    color: #fff;
}

div.formulaImage {
    flex-basis: 33%;
    padding-right: 10px;
}
div.inputForm{
    flex-basis: 33%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: -10px;
}
.inputForm div{
    padding-bottom: 5px;
    text-align:left;
    
}
.formulaImage img{
    object-fit: cover;
    width: 100%;
    
}
.fcontainer label{
    display: inline-block;
    width: 50%;
   vertical-align: top;
 
    
}
.fcontainer input{
    display: inline-block;
    width: 33%;
    text-align: right;
    height: 1.2em;
    
}
.fcontainer output{
    display: inline-block;
    width: 33%;
    text-align: center;
    
    
}
#buttonRight{
    text-align: end;
    margin-right: 80px;
}
#weeklyWageCalculatorButton{
    margin-left: 19.5em;
}
/* assignment 5 */

div.formulaImage{
    flex-basis: 50%;

}
#assignment5_4{
    justify-content: space-evenly;
}
#inputFields div{
    padding-top: 5px;
}

@media (max-width: 800px) {

    .fcontainer {
        
        flex-direction: column;
    }

    section.fcontainer div {
        flex-basis: 100%;
        margin:15px 15px;
        width: 100%;
    }
    div.inputForm{
        margin-top: 20px;
    }
    div.calc {       
        width: 250px;
    }
    #weeklyWageCalculatorButton{
        margin-left: 0em;
    }
    #mainPage{
        justify-content: center;
    }
    #header{
        max-width: 65%;
    }
    #btn{
        margin: 0;
    }
   
}
#yards{
   margin-right: 0;
}

#error{
    font-size: smaller;
    color: red;
}

/* activity 2, lesson 7 table styles */
table{
    border: 1px solid white;
    border-collapse: collapse;

}
td{ 
    padding: 10px;
    text-align: center;
    border: 1px solid white;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Multiplication Table.</title>
    <link rel="stylesheet" href="../css/styles.css">
    <script defer src="./activity2.js"></script>
    <style>
        table{
            border: 1px solid black;
            margin: 0 auto;
        }
        td, th{
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
        th{
            
            border: 2px solid black;
        }
    </style>
</head>

<body>
    
    <div class="calc" id="assignment6">
        <h2>Multiplication Table</h2>
        <div>
            <label for="number1">Start</label>
            <input type="number" name="number1" id="number1" min="0" placeholder="0" onchange="">
        </div>
        <div>
            <label for="number2">End</label>
            <input type="number" name="number2" id="number2" min="0" placeholder="0" onchange="">
        </div>

        <p id="error"></p>
        <table id="output"></table>
        <p><button id="btn">Calculate</button></p>
    </div>

</body>

</html>

The result table with number1 = 2 and nuber2 = 4 must look like this:

x 2 3 4
2 4 6 8
3 6 9 12
4 8 12 16

The task was to use an array to hold the information generated during processing (values only) and display the results from the array (add HTML formatting) after processing is complete. I modified the code from the previous assignment which was working fine. The code is not working, shooting some errors.
I appreciate any help and suggestions on how to fix my code to make it work.

Answer 1

I finally solved this problem. The task was:

Blockquote Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used. Extend any of the

'use strict';

window.addEventListener('load', function () {
    document.getElementById('number1').addEventListener('focus', inputFocus);
    document.getElementById('number2').addEventListener('focus', inputFocus);
    document.getElementById('btn').addEventListener('click', buildTable);
    // document.getElementById('number1').focus();
    // document.getElementById('number2').focus();
});

function inputFocus() {
    document.activeElement.select();
    document.getElementById('error').innerText =
        'Enter ' + document.activeElement.id + ' value.';
}

function getMinNumber() {
    let multiplier = document.getElementById('number1').value;
    multiplier = Number(multiplier);
    return multiplier;
}

function getMaxNumber() {
    let expressionsNumber = document.getElementById('number2').value;
    expressionsNumber = Number(expressionsNumber);
    return expressionsNumber;
}

   

function buildArray() {
  document.getElementById("output").innerHTML = '';
    let number1 = getMinNumber();
    //  console.log(number1)
    let number2 = getMaxNumber();
    // console.log(number2)
    if (number1 <= 0 || number2 <= 0) {
        document.getElementById("error").innerText = "Enter a natural number!";
        
    } else if (number1 >= number2) {
        document.getElementById("error").innerText = "End value must be grater than Start value!";
        // document.getElementById("output").style.display = 'none';
      // return false
    }
    else {

    let table = [];
    let elements = (number2 - number1) + 1;
    let a = number1;
    let b = number1;
    for (let row = 0; row <= elements; row++) {
        table[row] = [];
        for (let column = 0; column <= elements; column++) {
            if (row == 0 && column == 0) {
                table[row][column] = "X";          //Top left cell
            } else if (row == 0 && column > 0) {
                table[row][column] = a;           //Horisontal multipliers
                a++;
            } else if (row > 0 && column == 0) {
                table[row][column] = b;            //Vertical multipliers
                b++;
            } else {
                table[row][column] = table[row][0] * table[0][column];      // Product of multipliers
            }
        }
    }
    
    return table;
}
}



function buildTable(array) {
  array = buildArray();
  console.log(array)
  let result = "<table border='1' style='border-collapse:collapse'><tr>";
  let header = array[0];
  for (let i = 0; i < header.length; i++) {
    result += "<th>" + header[i] + "</th>"; 
  }
  result += "</tr>";
  let val;
  for (let i = 1; i < array.length; i++) {
    result += "<tr>";
    for (let j = 0; j < array[i].length; j++) {
      val = array[i][j];
      if (j == 0){
        result += "<th>" + header[i] + "</th>"; 
      } else {
        result += "<td>" + val + "</td>";
      }
    }
    result += "</tr>";
  }
  result += "</table>";

  console.log(result);
  document.getElementById("output").innerHTML = result;
 
}

*{
    box-sizing: border-box;
}

.fcontainer{
    display: flex;
}   

div.fcontainer{
    justify-content: space-between;
    flex-basis: 50%;
    margin: 15px;
    
}

body {
    margin: 40px;
    background-color: rgb(230, 255, 247);
    font-family: 'Roboto', sans-serif;
    font-size: calc(10px + (24 - 10) * (100vw - 300px) / (1600 - 300));
}

h1, h2 {
    text-align: center;
}

img {
    display: block;
    width: 300px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

p {
    margin: 10px 0px;
}

button {
    margin: 10px 0px;
}

div.calc {
    margin: 0 auto;
    display: block;
    width: 600px;
    background-color: rgb(33, 209, 150);
    padding: 20px;
    border-radius: 5px;
    text-align: center;

}


div.calc p {
    text-align: left;
    margin-left: 55px;
}

.calc input {
    width: 80%;
    text-align: right;
    border-radius: 3px;
    border: none;
}

div.cal h2,
 h3 {
    text-align: center;
}
#assignment6 div{
    margin-top: 10px;
}

div.calc div input,
div.calc div label{
    width: 45%;
display: inline-block;
text-align: right;



}

.calc button {
    margin-left: 355px;
    border-radius: 5px;
    border:2px solid #008CBA;
    color: black;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.calc button:hover {
    background-color: #008CBA;
    color: white;
}
.calc button:active {
    transform: scale(0.98);
    /* Scaling button to 0.98 to its original size */
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
    /* Lowering the shadow */
    
}
/* Assignment Listings Page start */

#mainPage{
    background-image: url(../images/keyboard.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 350px;

}
#header{
    flex-direction: column;
    background-color: #9b9ea1;
    color: #fff;
    max-width: 50%;
    margin: 0 auto;
    align-self: center;    
}
#header h1{
    margin: 1em;
}
#main div{
    padding: 10px;
    background-color: #9b9ea1;
    margin: 15px;
    width: fit-content;
}
#main a{
    padding: 5px;
    margin: 5px;
    color: #fff;

}


/* Assignment Listings Page  end */

/* assignment 3  */
 section.fcontainer{   
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around; 
   flex-direction: row;    
   align-items: stretch;
   margin: 0 auto;
   max-width: 2600px;
   padding: 10px;
   border: 1 solid black;
}
 section.fcontainer div{
    background-color: blanchedalmond;
    flex-basis: 45%;
    padding: 15px;
    margin: 0 15px;
}
/* Assignment Events. Activity 4. Shape area calculator Start*/
body>div{
    background-color: gray;
    padding: 10px;
    color: #fff;
}

div.formulaImage {
    flex-basis: 33%;
    padding-right: 10px;
}
div.inputForm{
    flex-basis: 33%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: -10px;
}
.inputForm div{
    padding-bottom: 5px;
    text-align:left;
    
}
.formulaImage img{
    object-fit: cover;
    width: 100%;
    
}
.fcontainer label{
    display: inline-block;
    width: 50%;
   vertical-align: top;
 
    
}
.fcontainer input{
    display: inline-block;
    width: 33%;
    text-align: right;
    height: 1.2em;
    
}
.fcontainer output{
    display: inline-block;
    width: 33%;
    text-align: center;
    
    
}
#buttonRight{
    text-align: end;
    margin-right: 80px;
}
#weeklyWageCalculatorButton{
    margin-left: 19.5em;
}
/* assignment 5 */

div.formulaImage{
    flex-basis: 50%;

}
#assignment5_4{
    justify-content: space-evenly;
}
#inputFields div{
    padding-top: 5px;
}

@media (max-width: 800px) {

    .fcontainer {
        
        flex-direction: column;
    }

    section.fcontainer div {
        flex-basis: 100%;
        margin:15px 15px;
        width: 100%;
    }
    div.inputForm{
        margin-top: 20px;
    }
    div.calc {       
        width: 250px;
    }
    #weeklyWageCalculatorButton{
        margin-left: 0em;
    }
    #mainPage{
        justify-content: center;
    }
    #header{
        max-width: 65%;
    }
    #btn{
        margin: 0;
    }
   
}
#yards{
   margin-right: 0;
}

#error{
    font-size: smaller;
    color: red;
}

/* activity 2, lesson 7 table styles */
table{
    border: 1px solid white;
    border-collapse: collapse;

}
td{ 
    padding: 10px;
    text-align: center;
    border: 1px solid white;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - Assignment 8, Activity 1. Multiplication Table.</title>
    <link rel="stylesheet" href="../css/styles.css">
    <script defer src="./activity2.js"></script>
    <style>
        table{
            border: 1px solid black;
            margin: 0 auto;
        }
        td, th{
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
        th{
            background-color: azure;
            border: 2px solid black;
            color: black;
        }
    </style>
</head>

<body>
    <h1> - Assignment 8. Activity 1. </h1>
    <div class="calc" id="assignment6">
        <h2>Multiplication Table</h2>
        <div>
            <label for="number1">Start</label>
            <input type="number" name="number1" id="number1" min="0" placeholder="0" onchange="">
        </div>
        <div>
            <label for="number2">End</label>
            <input type="number" name="number2" id="number2" min="0" placeholder="0" onchange="">
        </div>

        <p id="error"></p>
        <table id="output"></table>
        <p><button id="btn" onclick="">Calculate</button></p>
    </div>

</body>

</html>

activities from JavaScript Programming/Loops to use an array to hold the information generated during processing (values only) and display the results from the array (add HTML formatting) after processing is complete.