Vultr DocsLatest Articles

JavaScript Program to Display the Multiplication Table

Updated on September 30, 2024
Display the Multiplication Table header image

Table of Contents

Introduction

The multiplication table is a fundamental concept in mathematics, often used in educational contexts to help students learn and practice multiplication. JavaScript, being a versatile programming language, allows you to easily implement a program that displays multiplication tables, useful for both web-based and educational software.

In this article, you will learn how to display the multiplication table in JavaScript through several examples. The examples will cover how to generate tables for a specific number, dynamically create a table up to a number chosen by the user, and enhance the output's readability with simple HTML formatting.

Displaying a Single Multiplication Table

Multiplication Table for a Specific Number

  1. Define the number for which the multiplication table is needed.

  2. Use a loop to iterate through numbers 1 to 10.

  3. Multiply the base number by each iterator and display the result.

    javascript 
    let number = 5; // Example number for multiplication table
console.log(`Multiplication Table for ${number}`);
for (let i = 1; i <= 10; i++) {
    console.log(`${number} * ${i} = ${number * i}`);
}

    This snippet generates the multiplication table for the number 5. It uses a for loop to multiply the number by each integer from 1 to 10, outputting the results sequentially.

Dynamic Multiplication Table Based on User Input

  1. Prompt the user to enter the number.

  2. Validate the user input to ensure it is a number.

  3. Display the multiplication table for the entered number up to 10.

    javascript 
    let userNumber = prompt("Enter a number to generate its multiplication table:");
let validatedNumber = parseInt(userNumber, 10);
if (!isNaN(validatedNumber)) {
    console.log(`Multiplication Table for ${validatedNumber}`);
    for (let i = 1; i <= 10; i++) {
        console.log(`${validatedNumber} * ${i} = ${validatedNumber * i}`);
    }
} else {
    console.log("Please enter a valid number.");
}

    In this example, a prompt collects a number from the user, converts it to an integer, checks if the input is a valid number, and then displays the multiplication table for that number. If the input is not a number, it alerts the user to enter a valid number.

Enhancing Output with HTML

Display in a Simple HTML Table

  1. Create a basic HTML structure.

  2. Use JavaScript within the HTML to generate and insert the multiplication table into the HTML document.

    html 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiplication Table</title>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        let baseNumber = 7; // Change this number as needed
        let result = `<table border="1"><tr><th>Multiplication Table for ${baseNumber}</th></tr>`;
        for (let i = 1; i <= 10; i++) {
            result += `<tr><td>${baseNumber} x ${i} = ${baseNumber * i}</td></tr>`;
        }
        result += "</table>";
        document.body.innerHTML = result;
    });
    </script>
</head>
<body>
</body>
</html>

    This HTML document contains a script that executes once the content of the page has fully loaded. It constructs an HTML table displaying the multiplication table for the number 7, adding each calculation as a new row in the table.

Conclusion

Displaying a multiplication table in JavaScript provides a straightforward way to apply basic programming constructs like loops and conditionals. When combined with HTML, you can create visually engaging and interactive web applications that help users learn multiplication tables dynamically. By adapting the examples provided, you can expand your JavaScript application to include more complex and user-interactive functionalities.