3 ways to print a multiplication table in JavaScript

How to print a multiplication table in HTML, CSS, and JavaScript:

In this post, we will learn how to print a multiplication table in HTML, CSS and JavaScript. Before writing the HTML, and CSS files, I will show you how to write the program in pure JavaScript. Then we will migrate the code to HTML and CSS and check how it looks on a browser.

Method 1: JavaScript program to print a multiplication table using for loop:

Let’s write the program first using JavaScript:

const number = parseInt(prompt("Enter a number : "));

for (let i = 1; i <= 10; i++) {
  console.log(number + "*" + i + "=" + number * i);
}

To run this program, open your developer console and paste the above program. It will ask you to enter a number with a popup. Enter the number and it will print the multiplication table for that number.

Download it from Github

In this program, we are using a for loop to print the table. The syntax of a for loop is:

for(init; condition; end){
  //body
}

The init block is executed only once. This is used to initialize a variable.
The condition block is used to add a condition. The loop will keep running until the condition is true.
The end block is used to change the current value of the variable used in the condition block. This block is executed at the end of each execution of the loop.

In the above program, we have initialized the value of the variable i as 1 in the init block. The loop will keep running until the value of i is less than or equal to 10. At the end of each iteration, the value of i is incremented by 1.

We are using the value of i in the body of the loop to print the multiplication table for the given number.

Using HTML, CSS with JavaScript and for loop:

Let’s use HTML and CSS with JavaScript to print the multiplication table. We will use a for loop as discussed above to print the multiplication table for a given number.

You need to create one html file to run it. Create one example.html file and copy-paste the below code snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        display:flex;
        flex-direction: column;
        align-items: center;
      }
      button {
        background-color: #806ae4;
        border: none;
        color: white;
        padding: 15px 15px;
        text-decoration: none;
        cursor: pointer;
        border-radius: 12px;
        width: 100px;
        margin-top: 10px;
        height: 30px;
        line-height: 0;
      }
      p{
        color: #27186b;
      }
    </style>
    <script>
      function addNumbers() {
        var number;
        var result = "";

        number = Number(document.getElementById("number").value);

        for(var i = 1; i<= 10; i++){
          result = result + "<p>"+number + "*" + i + "=" + number * i+"</p>";
        }

        document.getElementById("result").innerHTML = result;
      }
    </script>
  </head>
  <body>
      <h3>Enter the number : </h3>
      <input id="number" />
      <button onclick="addNumbers()">Print</button>
      <div id="result">
  </body>
</html>

Open that file in your browser. It will look as below:

Download it from Github

In this example,

The style block includes the CSS styles and the script block includes the JavaScript code.
Inside the <body></body>, we have one <input/> field to take the number as input from the user. One button is also there to invoke the addNumbers function in JavaScript if the user clicks on it. See, how easy it is to run JavaScript from HTML !!
Inside the addNumbers function, we are adding all lines of the multiplication table to a variable result. Each line is wrapped in a <p>...</p> tag.
Once the loop is executed, we are accessing the element with id result in the HTML file, which is a <div> in the <body/>. We are changing the innerHTML property to display the table in the <div>.

Method 2: JavaScript program to print a multiplication table using a while loop:

Similar to the for loop, we can also use a while loop to print a multiplication table. The syntax of a while loop is:

while(condition){
  //body
}

It will keep running the body of the loop until the condition is true. We can add the end statement of the for-loop at the end of the while loop body. If I write the above program with a while loop, it will be:

const number = parseInt(prompt("Enter a number : "));
let i = 1;

while (i <= 10) {
  console.log(number + "*" + i + "=" + number * i);
  i++;
}

The variable i is initialized before the loop starts.
It will run until its value is less than or equal to 10.
At the end of each iteration, it increments the value of i by 1.

Download it from Github

Print the multiplication table in HTML, CSS, and JavaScript with while-loop:

We can change the above HTML code to use a while loop as below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        display:flex;
        flex-direction: column;
        align-items: center;
      }
      button {
        background-color: #806ae4;
        border: none;
        color: white;
        padding: 15px 15px;
        text-decoration: none;
        cursor: pointer;
        border-radius: 12px;
        width: 100px;
        margin-top: 10px;
        height: 30px;
        line-height: 0;
      }
      p{
        color: #27186b;
      }
    </style>
    <script>
      function addNumbers() {
        var number;
        var result = "";

        number = Number(document.getElementById("number").value);
        
        var i = 1;

        while(i<= 10){
          result = result + "<p>"+number + "*" + i + "=" + number * i+"</p>";
          i++;
        }

        document.getElementById("result").innerHTML = result;
      }
    </script>
  </head>
  <body>
      <h3>Enter the number : </h3>
      <input id="number" />
      <button onclick="addNumbers()">Print</button>
      <div id="result">
  </body>
</html>

It will give similar results.

Download it from Github

Method 3: By using a do-while loop:

The do-while loop is similar to the while loop. Its syntax is:

do{
  //body
}while(condition);

It executes the body and checks for the condition after each execution. We can use it as below:

const number = parseInt(prompt("Enter a number : "));
let i = 1;

do {
  console.log(number + "*" + i + "=" + number * i);
  i++;
}while (i <= 10);

Download it from Github

Similarly, we can use it with HTML, CSS and JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        display:flex;
        flex-direction: column;
        align-items: center;
      }
      button {
        background-color: #806ae4;
        border: none;
        color: white;
        padding: 15px 15px;
        text-decoration: none;
        cursor: pointer;
        border-radius: 12px;
        width: 100px;
        margin-top: 10px;
        height: 30px;
        line-height: 0;
      }
      p{
        color: #27186b;
      }
    </style>
    <script>
      function addNumbers() {
        var number;
        var result = "";

        number = Number(document.getElementById("number").value);
        
        var i = 1;

        do{
          result = result + "<p>"+number + "*" + i + "=" + number * i+"</p>";
          i++;
        }while(i<= 10);

        document.getElementById("result").innerHTML = result;
      }
    </script>
  </head>
  <body>
      <h3>Enter the number : </h3>
      <input id="number" />
      <button onclick="addNumbers()">Print</button>
      <div id="result">
  </body>
</html>

Download it from Github

CodeVsColor

3 ways to print a multiplication table in JavaScript

How to print a multiplication table in HTML, CSS, and JavaScript:

Method 1: JavaScript program to print a multiplication table using for loop:

Using HTML, CSS with JavaScript and for loop:

Method 2: JavaScript program to print a multiplication table using a while loop:

Print the multiplication table in HTML, CSS, and JavaScript with while-loop:

Method 3: By using a do-while loop:

You might also like: