Add numbers using javascript
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add 2numbers using javascript </title>
<script type='text/javascript'>
function OnAdd() {
try {
var num1 = document.getElementById('txtnum1').value;
var num2 = document.getElementById('txtnum2').value;
var result = document.getElementById('result');
result.innerHTML = parseFloat(num1) parseFloat(num2);
}
catch (e) {
alert(e.message);
}
}
</script>
</head>
<body>
<input type='text' id='txtnum1'/> <input type='text' id='txtnum2'/>
<input type='button' value='Add' onclick='javascript: OnAdd()'/>
<div id='result' style='color:white;background-color:teal'/>
</body>
</html>
Tags: Add numbers using javascript, ParseFloat in javascript, button OnClick in javascript,document.getElementById,getElementById,try catch in javascript, exceptions in javascript, javascript & html5
Step 1) Add 2 text boxes and 1 button control
<input type='text' id='txtnum1'/> <input type='text' id='txtnum2'/>
<input type='button' value='Add' onclick='javascript: OnAdd()'/>
Step 2) Add one result holding html tag, Here i choose div.
<div id='result' style='color:white;background-color:teal'/>
Step 3) Add javascript code to get values of step 1 text boxes ,parse those value and do result.
<script type='text/javascript'>
function OnAdd() {
try {
var num1 = document.getElementById('txtnum1').value;
var num2 = document.getElementById('txtnum2').value;
var result = document.getElementById('result');
result.innerHTML = parseFloat(num1) parseFloat(num2);
}
catch (e) {
alert(e.message);
}
}
</script>
Step 4) Run the Page. enter 2 values click on Add -> you get result displayed in result div tag.
<input type='text' id='txtnum1'/> <input type='text' id='txtnum2'/>
<input type='button' value='Add' onclick='javascript: OnAdd()'/>
Step 2) Add one result holding html tag, Here i choose div.
<div id='result' style='color:white;background-color:teal'/>
Step 3) Add javascript code to get values of step 1 text boxes ,parse those value and do result.
<script type='text/javascript'>
function OnAdd() {
try {
var num1 = document.getElementById('txtnum1').value;
var num2 = document.getElementById('txtnum2').value;
var result = document.getElementById('result');
result.innerHTML = parseFloat(num1) parseFloat(num2);
}
catch (e) {
alert(e.message);
}
}
</script>
Step 4) Run the Page. enter 2 values click on Add -> you get result displayed in result div tag.
Complete code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add 2numbers using javascript </title>
<script type='text/javascript'>
function OnAdd() {
try {
var num1 = document.getElementById('txtnum1').value;
var num2 = document.getElementById('txtnum2').value;
var result = document.getElementById('result');
result.innerHTML = parseFloat(num1) parseFloat(num2);
}
catch (e) {
alert(e.message);
}
}
</script>
</head>
<body>
<input type='text' id='txtnum1'/> <input type='text' id='txtnum2'/>
<input type='button' value='Add' onclick='javascript: OnAdd()'/>
<div id='result' style='color:white;background-color:teal'/>
</body>
</html>
Tags: Add numbers using javascript, ParseFloat in javascript, button OnClick in javascript,document.getElementById,getElementById,try catch in javascript, exceptions in javascript, javascript & html5
great
ReplyDelete