In this article, we will make a program to print the table of any user defined number using a function. Here, we will get a number from the user, and we will just print the whole table. We will add the logic for this table in a function. We will use some HTML element to get the user’s input, but we can also use prompt instead of input field to make this program in JavaScript purely.
We will create a function in which we will print the table, like we do in mathematics. Here we will take user input, then output should be a table of that number. For example, user inputs the number 5 than output should be 5,10,15,20,25,30,35,40,45,50. This will be so easy program to do, so let’s make it.
Creating Program Using HTML and JS
So firstly, we will make an HTML markup as always. Then in this we have to add a script tag to write the JS code. You can also make a separate file for the JS and add the path in the HTML. In this HTML, we have added an input field to get the user’s input and a button, on which we have applied onclick event listener with a function call to get the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="number" id="num1">
<button onclick= res()>Result</button>
<script>
var result;
function res(){
var x = document.querySelector("input").value;
for(var i=1; i<=10; i++){
result = i * x;
document.write(`<h2>${x} X ${i} = ${result}</h2>`)
}
}
</script>
</body>
</html>Now, in this function, we have declared a variable x in which we have to fetch the value using document.querySelector("num1") to get value from the input value. Then we have added another variable in which we will store the value for the result. In this, we will apply the logic to get table. For that we have added a for loop which will starts from 1 value, and it will cycle for 10 times. In this loop, we will just multiply the i with the inputted value and store in the result. Once the loop gets completed, then we print the result.
If you want to make it in JS only, then you can remove input field and button. And you can use prompt() to get the user’s value.
Output
