All of us know HTML is only static representation of a web page , we always wanted to add some functionality to it. For getting started with JavaScript is the best one. Lets now see a basic HTML page with some JavaScripting in it.
Here we will take two text boxes for entering 2 values and 4 buttons for addition, substraction ,multiplication and division respectively. When we enter some values in those textboxes and press any button then using JavaScript we perform the calculation and return the result.
For each textbox we will give some id so as to refer them in JavaScript
we will also have 4 functions for calculating their sum , product , differencs and division respectively andwe call a function corresponding to it when the button is clicked .
Here we will take two text boxes for entering 2 values and 4 buttons for addition, substraction ,multiplication and division respectively. When we enter some values in those textboxes and press any button then using JavaScript we perform the calculation and return the result.
For each textbox we will give some id so as to refer them in JavaScript
Enter first number: <input type ="text" id="1stnum" /><br> Enter second number: <input type ="text" id="2ndnum" /><br>
we will also have 4 functions for calculating their sum , product , differencs and division respectively andwe call a function corresponding to it when the button is clicked .
<input type="button" id="sum" value="sum" onclick="findsum()"/> <input type="button" id="sub"value="sub" onclick="findsub()"/> <input type="button" id="mul"value="mul" onclick="findmul()"/> <input type="button" id="mul"value="div" onclick="finddiv()"/>
Now when any button is clicked its corresponding function is called.
We will get the value of the textbox in JavaScript by using
document.getElementById("elementId").value;
So now for getting the values of the 2 text boxes we use
document.getElementById("1stnum").value;
document.getElementById("2ndnum").value;
we will store those 2 values in variables x and y respectively and we will simply add or substract or multiply or divide x,y and store the result in another variable z.
Now for the result to show we will create an empty paragraph with some id and set the result to that empty paragarph.
<p id = "result"></p>
The Complete code is here,
<html>
<head>
<title>JavaScript Example</title>
<script>
function findsum()
{
var y = document.getElementById("1stnum").value;
var z = document.getElementById("2ndnum").value;
var x = +y + +z;
document.getElementById("result").innerHTML = "Sum is :" + x;
}
function findmul()
{
var y = document.getElementById("1stnum").value;
var z = document.getElementById("2ndnum").value;
var x = +y * +z;
document.getElementById("result").innerHTML = "Product is :" + x;
}
function findsub()
{
var y = document.getElementById("1stnum").value;
var z = document.getElementById("2ndnum").value;
var x = +y - +z;
document.getElementById("result").innerHTML = "Difference is :" + x;
}
function finddiv()
{
var y = document.getElementById("1stnum").value;
var z = document.getElementById("2ndnum").value;
var x = +y / +z;
document.getElementById("result").innerHTML = "Division is :" + x;
}</script>
</head>
<body style="text-align:center";>
<form>
Enter first number:
<input type ="text" id="1stnum" /><br>
Enter second number:
<input type ="text" id="2ndnum" /><br>
<input type="button" id="sum" value="sum" onclick="findsum()"/>
<input type="button" id="sub"value="sub" onclick="findsub()"/>
<input type="button" id="mul"value="mul" onclick="findmul()"/>
<input type="button" id="mul"value="div" onclick="finddiv()"/><br><br>
</form>
<p id = "result"></p>
</body>
</html>
OUTPUT :
No comments:
Post a Comment