[B2SALONWEBDESIGN]

pls help. i am having a dickens of a time figuring out how to add an event handler that clears my text fields when the clear button is clicked.

this is the code that ive done but to no avail... thanks pls advise

var $ = function (id) {
    return document.getElementById(id);
}

var calculate_click = function () {
    var investment = parseFloat( $("investment").value );
    var annualRate = parseFloat( $("rate").value );
    var years = parseInt( $("years").value );

	$("futureValue").value = "";
	
	if (isNaN(investment) || investment <= 0) {
		alert("Investment must be a valid number\nand greater than zero.");
	} else if(isNaN(annualRate) || annualRate > 20) {
		alert("Annual rate must be a valid number\nand less than or equal to 20.");
	} else if(isNaN(years) || years > 50) {
		alert("Years must be a valid number\nand less than or equal to 50.");
	} else {
		var monthlyRate = annualRate / 12 / 100;
		var months = years * 12;
		var futureValue = 0;

		for ( i = 1; i <= months; i++ ) {
			futureValue = ( futureValue + investment ) *
				(1 + monthlyRate);
		}
		$("futureValue").value = futureValue.toFixed(2);
	} 
}
var clear_click = function () {
	var investment = parseFloat();
    var annualRate = parseFloat();
    var years = parseInt();
}
window.onload = function () {
    $("calculate").onclick = calculate_click;
    $("investment").focus();
}

This post has been edited by Dormilich: 31 August 2011 - 10:07 PM
Reason for edit:: please use [code] /* your code source here */ [/code] tags when posting code

[codeprada]

Have you tried the error console? Please post all code in code tags.

[VolcomMky]

First, I think you need to declare some of your variables globally (outside of the functions)

var investment = parseFloat();
var annualRate = parseFloat();
var years = parseInt();

And then inside of the functions remove the word "var" because they have already been declared.
Settings them globally will allow you to make them usable across the page and all functions instead of function specific.

var investment;
var annualRate;
var years;
	
var $ = function (id) {
	return document.getElementById(id);
}

var calculate_click = function () 
{
	investment = parseFloat( $("investment").value );
	annualRate = parseFloat( $("rate").value );
	years = parseInt( $("years").value );
	
	$("futureValue").value = "";
	
	if (isNaN(investment) || investment <= 0) 
	{
		alert("Investment must be a valid number\nand greater than zero.");
	}
	else if(isNaN(annualRate) || annualRate > 20) 
	{
		alert("Annual rate must be a valid number\nand less than or equal to 20.");
	}
	else if(isNaN(years) || years > 50)
	{
		alert("Years must be a valid number\nand less than or equal to 50.");
	}
	else
	{
		var monthlyRate = annualRate / 12 / 100;
		var months = years * 12;
		var futureValue = 0;
		
		for ( i = 1; i <= months; i++ ) 
		{
			futureValue = ( futureValue + investment ) * (1 + monthlyRate);
		}
		$("futureValue").value = futureValue.toFixed(2);
	} 
	}

var clear_click = function () 
{
	investment = false;
	annualRate = false;
	years = false;
}
window.onload = function () 
{
	$("calculate").onclick = calculate_click;
	$("investment").focus();
} 

[Dormilich]

global variables should only be used when absolutely necessary (they can throw up your code when one function interferes with another).

just for clearing the text fields, they are unnecessary anyways. if possible, use a HTML reset button or set the value of the appropriate fields to empty otherwise.

var clear_click = function ()
{
    $("investment").value = "";
    $("rate").value = "";
    $("years").value = "";
}

This post has been edited by Dormilich: 31 August 2011 - 10:13 PM