JavaScript Program to Display the Multiplication Table

2 min readPublished 27 September 2024

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

Define the number for which the multiplication table is needed.
Use a loop to iterate through numbers 1 to 10.
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}`); }
Powered by Vultr AgentBeta
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

Prompt the user to enter the number.
Validate the user input to ensure it is a number.
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."); }
Powered by Vultr AgentBeta
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

Create a basic HTML structure.

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>
Powered by Vultr AgentBeta

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.

More to Explore

Tech Talk: Running a Self-Improving AI Agent with Hermes on Vultr

Tech Talk: Implementing Fine-Grained Access Control with Vultr IAM

Tech Talk: Getting Started with Vultr IAM

Tech Talk: Simplifying Zero-Trust Networking with NetBird on Vultr Marketplace

0 Comments

Start the conversation

Be the first to comment and share your perspective with the community.

Introduction

Displaying a Single Multiplication Table

Multiplication Table for a Specific Number

Define the number for which the multiplication table is needed.

Use a loop to iterate through numbers 1 to 10.

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}`);
}
Powered by Vultr AgentBeta

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

Prompt the user to enter the number.

Validate the user input to ensure it is a number.

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.");
}
Powered by Vultr AgentBeta

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

Create a basic HTML structure.

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>
Powered by Vultr AgentBeta

Conclusion