Hello friends, today I will tell you through this article how you can do multiplication of any two numbers through javascript. So let’s try to understand step by step.
Multiplication Two Numbers With Javascript, Calculate Multiply 2 numbers Using js, How to Multiply Two Numbers by Javascript or Jquery With html form?
Friends are very easy to multiplication of 2 numbers through JavaScript and that too with html code.First of all, you have to create a html file and write html code in that file. Also you can write the code of javascript in the same page. So let’s try to understand how to do it.
Overview Steps
Step 1:- Create html file (multiplication.html).
Step 2:- Write javascript code in multiplication.html file
Step 1:- Create html file (multiplication.html).
First of all you create a file of a multiplication.html. And add the html code given below in this page.
multiplication.html
<!DOCTYPE html> <html> <head> <title>Multiplication Two Numbers Using Javascript.</title> </head> <body> <h1>Multiplication Two Numbers Using Javascript.</h1> <div class="controls"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_name">First Number: *</label> <input id="box1" type="text" class="form-control" oninput="multiplication_calculate();" placeholder="5"/> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_name">Second Number: *</label> <input id="box2" class="form-control" type="text" oninput="multiplication_calculate();" placeholder="5"/> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="form_name">Result: *</label> <input id="result" class="form-control" readonly placeholder="5 x 5 = 25"/> </div> </div> </div> </div> </body> </html>
Step 2:- Write javascript code in multiplication.html file
Then after that add the code of javascript given below to the same file in which you are told. How can you multiplication of two numbers using javascript code.
<script>
function multiplication_calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2;
document.getElementById('result').value = myResult;
}
</script>
Now I will tell you how you will add this code in a single page. You are explained below by adding the name of the file and the code in it. You can create a file name in your server and copy this code and run it on your server. You can do it and you are also given a link to the demo.
multiplication.html
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Two Numbers Using Javascript.</title>
</head>
<body>
<h1>Multiplication Two Numbers Using Javascript.</h1>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">First Number: *</label>
<input id="box1" type="text" class="form-control" oninput="multiplication_calculate();" placeholder="5"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Second Number: *</label>
<input id="box2" class="form-control" type="text" oninput="multiplication_calculate();" placeholder="5"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_name">Result: *</label>
<input id="result" class="form-control" readonly placeholder="5 x 5 = 25"/>
</div>
</div>
</div>
</div>
<script>
function multiplication_calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2;
document.getElementById('result').value = myResult;
}
</script>
</body>
</html>