Saturday, 1 March 2014

Add Two Numbers and Show Result Dynamically using Java Script & Html Controls

Addition of Two Nos using Html Controls
Ans:-

Default.aspx:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddWthHtmlCntrl.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Addition of Three Nos using Html Controls</title>
    <script language="javascript">
function getValues(val){

var numVal1=parseInt(document.getElementById("one").value);
var numVal2=parseInt(document.getElementById("two").value);
var numVal3=parseInt(document.getElementById("three").value);

var totalValue = numVal1 + numVal2 + numVal3;

document.getElementById("main").value = totalValue;
}
</script>
<style>
input.numbox{
width:30px;
height:20px;
}
textarea.mainbox{
width:200px;
height:100px;
font-size:30;
font-weight:bold;
}
</style>

</head>
<body>
    <form id="form1" runat="server">
    <center>
    <div>
    textbox1:
<input class="numbox" type="text" id="one" value="0" onkeyup="getValues(1)" /><br/>
textbox2:
<input class="numbox" type="text" id="two" value="0" onkeyup="getValues(2)"/><br/>
textbox3:
<input class="numbox" type="text" id="three" value="0" onkeyup="getValues(3)"/><br/>
<br/>
Main TextBox:<br/>
<input type="text" id="main" value=""/>
<%--<textarea style="mainbox" id="main" value=""></textarea>--%>
    </div>
    </center>
    </form>
</body>
</html>

No comments:

Post a Comment