JavaScript to print Multiplication Table of a Number

In this article we are going to print Multiplication Table of a Number using JavaScript. We take an input from the user and print the multiplication table. We use the onchange event to capture the input provided by the user.

printTable() function

In this function we check whether the input provided by the user is a Number or not using JavaScript’s inbuilt function isNaN(). If the input is numeric then we print the Multiplication table in the mul span tag by concatenating the result to table variable else we display an error message to Enter a valid Number.

Demo Download Source Code

<html>
<head>
<style>
body {
background: #F4F4F4;
font-family: Arial;
margin: 0;
}
</style>
</head>
<body>
<table border="0" style="margin: 0 auto; width:500px">
	<tr>
		<td colspan="2"><h2>Print Multiplication Table using JavaScript</h2></td>
	</tr>

	<tr>
		<td width="28%">Enter a Number : </td>
		<td><input type="number" onchange="printTable(this)"></td>
	</tr>
	<tr>
		<td colspan="2"><span id="mul"></span></td>
	</tr>
</table>

<script>
function printTable(num) {
	var input = num.value;
	if(!isNaN(input)) {
		var table="";
		var number="";
		for(i=1;i<=10;i++) {
			number = input * i;
			table +=  input + " * " + i + " = " + number + "<br/>";
		}
		document.getElementById("mul").innerHTML = table;
	}
	else {
		document.getElementById("mul").innerHTML = "Please Enter a valid Number";
	}
}
</script>
</body>
</html>		

Leave a Reply