 |
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
|
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