AdBlock Detected

We provide high-quality source code for free. Please consider disabling your AdBlocker to support our work.

Buy me a Coffee

Saved Tutorials

No saved posts yet.

Press Enter to see all results

How To Generate Multiplication Table Using JavaScript

By pushpam abhishek
Listen to this article

How To Generate Multiplication Table Using JavaScript
google


Introduction


Here we will learn How To Generate Multiplication Table Using JavaScript and display to dynamically multiplied numbers in a table when the user clicks the generate button. The code use onclick() function to call a specific function that dynamically displays a table of multiplication using a nested for() loops in order to loop through number by multiplying as counting numbers. Feel free to modify and apply it in your system, this is a user-friendly kind of program We will be using JavaScript as a server-side scripting language because It gives greater control of your web page and extends its capability in a modern way approach. It is written in HTML or as external sourcing to add some necessary features to your website.

Getting started:

First, you have to download the bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.


Description:

This code contains the interface of the application. To create this just write these blocks of code inside the text editor and save it as index.html.
function displayTable(){
var number = document.getElementById('number').value;
 
 
if(number == ""){
alert("Enter some number first");
}else{
var digit = 0;
if(number <= 0){
digit = 1;
document.getElementById('number').value = 1;
}else if(number > 10){
digit = 10;
document.getElementById('number').value = 10;
}else{
digit = number;
}
 
 
 
var data = "";
for(var i = 1; i <= digit; i++) {
data += "<tr class='alert-info'>";
for(var j = 1; j <= 10; j++){
 
data += "<td>"+i*j+"</td>";
}
data += "</tr>";
}
 
document.getElementById('data').innerHTML = data;
}
}
 
document.getElementById("number").onkeyup=function(){
var input=parseInt(this.value);
 
if(input > 10){
this.value = 10;
}
if(input < 0){
this.value = 1;
}
 
}  


Output:

When we run the above code we will get a result like as shown below

Generate Multiplication Table Using JavaScript
google

Here you have it we successfully created a Generate Multiplication Table using JavaScript. I hope that this simple tutorial helps you to what you are looking for. Happy Coding

Share this post

pushpam abhishek

About pushpam abhishek

Pushpam Abhishek is a Software & web developer and designer who specializes in back-end as well as front-end development. If you'd like to connect with him, follow him on Twitter as @pushpambhshk

1 comment: