Hello
I have attempted to make a Simple Interest Calculator using html forms and javascript and got stuck some where.Here the main problem is alert box does not pop up when i click the calculate interest button
Code:
<html>
<head>Calculator Simple Interest
<script>
var p=document.getElementById("pa");
var n=document.getElementById("ny");
var r=document.getElementById("ri");
function si()
{
var s;
s=(p*n*r)/100;
alert("Total Amount is"+s);
}
function ta()
{
var t;
t=p+s;
alert("Total Amount is"+t);
}
</script>
</head>
<title>Simple Interest Calculator</title>
<body>
<form>
<b>Principal Amount</b><input type="number" id="pa">
<b>No. of years</b><input type="number" id="ny">
<b>Rate of interest</b><input type="number" id="ri">
<input type="button" onclick="si()" value="Calculate Interest">
<input type="button" onclick="ta()" value="Final Amount">
</form>
</body>
</html>
Last edited by adityavishnu; 11-13-2012 at 08:09 AM..
Your main problems are that you are trying to get the values of p, n and r as soon as the page loads (when they do not even exist at that moment) instead of when the function runs.
Also, the values calculated by one function are not somehow retained for use by the second function - you must work out the interest again. Once a function ends the values of any local variables ae lost.
Also, values entered by the user are strings unless converted to numbers.
Code:
<html>
<head>Calculator Simple Interest
<script>
function si() {
var p=Number(document.getElementById("pa").value);
var n=Number(document.getElementById("ny").value);
var r=Number(document.getElementById("ri").value);
var s=p*n*r/100;
alert("Total Interest Amount is "+s.toFixed(2));
}
function ta() {
var p=Number(document.getElementById("pa").value);
var n=Number(document.getElementById("ny").value);
var r=Number(document.getElementById("ri").value);
var s=p*n*r/100;
var t = p+s;
alert("Total Amount Payable is "+t.toFixed(2));
}
</script>
</head>
<title>Simple Interest Calculator</title>
<body>
<form>
<b>Principal Amount</b><input type="number" id="pa">
<b>No. of years</b><input type="number" id="ny">
<b>Rate of interest</b><input type="number" id="ri">
<input type="button" onclick="si()" value="Calculate Interest">
<input type="button" onclick="ta()" value="Final Amount">
</form>
</body>
</html>
"What's the three words you never want to hear while making love? Honey, I'm home." - Ken Hammond.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
hey ,ma idea is to declare p,n,r as global variable and then use it in functions to calculate simple interest and total amount
Yes, you could do that, but many people think it is a good idea to avoid using global variables as far as possible. And in this case it would not achieve anything as if the user clicked "Final Amount" before clicking "Calculate Interest" then an error would be generated. Can you see why?
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
I don't know how to declare it as global variable but whats the matter with this case if p n r are declared globally
Code:
var p=Number(document.getElementById("pa").value);
var n=Number(document.getElementById("ny").value);
var r=Number(document.getElementById("ri").value);
function si()
{
var s=p*n*r/100;
alert("Total Interest Amount is "+s.toFixed(2));
}
function ta() {
var s=p*n*r/100;
var t = p+s;
alert("Total Amount Payable is "+t.toFixed(2));
}
I don't know how to declare it as global variable but whats the matter with this case if p n r are declared globally
Code:
var p=Number(document.getElementById("pa").value);
var n=Number(document.getElementById("ny").value);
var r=Number(document.getElementById("ri").value);
function si()
{
var s=p*n*r/100;
alert("Total Interest Amount is "+s.toFixed(2));
}
function ta() {
var s=p*n*r/100;
var t = p+s;
alert("Total Amount Payable is "+t.toFixed(2));
}
If you do not know how to declare p, n and r as global variables then indeed you may not be able to see the problem.
Declare p, n and r as global variables (look up how to do this very basic thing) and then test your script using alerts to inspect the value of the various variables as the script executes. And/or use your error console to identify errors.
I'll say it one more time - Your main problems are that you are trying to get the values of p, n and r as soon as the page loads (when they do not even exist at that moment) instead of when the function runs.
I gave you a full solution in Post #2. If that displeases you in some way, then that is OK by me. But if you are unwilling to take advice then it is pointless asking for help so you must proceed on your own.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
hey i understood what u said....
kindly tell me which error console to use...that will make it very much easy to program
thank you
All browsers now have a full JavaScript debugger built in (except Firefox which has several extensions available to add a debugger such as Firebug). So you can even go beyond the error console and step through your code one command at a time and see exactly what gets updated and what the values it uses are.
Press F12 in IE and Chrome to access the developer tools.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Before you post, read our: 
