Basic Help on enabling CLEAR button

Coding basics using getElementbyID.value to clear fields

Page 1 of 1

5 Replies - 4709 Views - Last Post: 08 August 2010 - 08:13 AM

#1 wgrayson  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 28
  • Joined: 18-May 09

Basic Help on enabling CLEAR button

Posted 07 August 2010 - 10:40 AM

I'm working through a Beginning Javascript textbook, and cannot get a simple Clear function to work in the code. The question was as follows: "Add an event handler named clear_click that clears the text butoxes when the clear button is clicked. This handler should store empty text strings ont he four text boxes on the page." As always, this is the point of the book where you can't find the answers and you need to figure it out.

Up to this point the text only uses the "getElementbyID" method of creating a function to assign commands. And it also creates a "shortcut" function with the var name "$" (it's the first function in the code). It also shows how to add the event-handler as well. Well, the example in the book shows how to write / store an empty text string to a field. Unfortunately, it doesn't show how to do that for multiple fields. So far, my work only clears the first field, but not the other three. I've been researching on the web, and it's not helping. I am also for the time being trying to stay within the parameters of the lesson --- I'm not trying to use the getElementbyTagName method, for example (and besides, I tried that with disastrous results). I'd like to see if I can get the getELementbyID.value "" way to work if possible.

I've pasted in the HTML and JS codes below. (we don't care about the CSS). The specific function is found on lines 4-6 and line 36 (the event handler, which I think works). Note, the actual HTML file is a basic exercise file. Thanks in advance. I'm just stumped. Do I need to do a for or while loop here?
W!

Javascript code
var $ = function (id) {
    return document.getElementById(id); //this is shortcut function for getElementbyId to follow
}
var clear_click = function () {
	$("investment" ,"annualRate" , "years" , "futureValue").value =("");//This method only clears the first field. 
}

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\nandgreater than zero.");
	} else if(isNaN(annualRate) || annualRate <= 0 || annualRate >=20) {
		alert("Annual rate must be a valid number greater than zero and less than 20.");
	} else if(isNaN(years) || years >= 50) {
		alert("Years must be a valid number\nless than 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);
	} 
}

window.onload = function () {
    $("calculate").onclick = calculate_click;
	$("clear").onclick = clear_click;
    $("investment").focus();
}




HTML Code
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Future Value Calculator</title>
    <link rel="stylesheet" type="text/css" href="future_value.css" />
    <script type="text/javascript" src="future_value.js"></script>
</head>

<body>
    <div id="content">
        <h1>Future Value Calculator</h1>
        <p>Enter the values below and click "Calculate".</p>
        
        <label for="investment">Monthly Investment:</label>
        <input type="text" id="investment" /><br />
        
        <label for="rate">Annual Interest Rate:</label>
        <input type="text" id="rate" />%<br />
        
        <label for="years">Number of Years:</label>
        <input type="text" id="years" /><br />
        
        <label for="futureValue">Future Value:</label>
        <input type="text" id="futureValue" disabled="disabled" /><br />
        
        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate" />&nbsp;<input type="button" id="clear" value="Clear" /><br />
        
               
    </div>
</body>
</html>



Edited by macosxnerd101: Welcome to DIC! :) Please post your code using code tags, like so: :code:.

Is This A Good Question/Topic? 0
  • +

Replies To: Basic Help on enabling CLEAR button

#2 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Basic Help on enabling CLEAR button

Posted 07 August 2010 - 01:06 PM

Your '$' function only accepts one parameter at a time. :detective:

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


Was This Post Helpful? 0
  • +
  • -

#3 wgrayson  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 28
  • Joined: 18-May 09

Re: Basic Help on enabling CLEAR button

Posted 07 August 2010 - 04:57 PM

Yeah, I tried that one also. To make sure it wasn't a keying error, I pasted your code in. Didn't work either. Still only clears just the first "investment" field and doesn't continue to clear the others.
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Basic Help on enabling CLEAR button

Posted 07 August 2010 - 06:11 PM

If using FF browser, what sort of errors do you see in the error console?

Change code to this:
var clear_click = function () {
  $("investment").value ="";
  $("rate").value ="";
  $("years").value ="";
  $("futureValue").value ="";
}



This post has been edited by JMRKER: 07 August 2010 - 06:20 PM

Was This Post Helpful? 0
  • +
  • -

#5 wgrayson  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 28
  • Joined: 18-May 09

Re: Basic Help on enabling CLEAR button

Posted 07 August 2010 - 10:19 PM

Wow. How embarrassing was THAT. I used the wrong ID name for rate in my original coding. Thank you.
Was This Post Helpful? 0
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Basic Help on enabling CLEAR button

Posted 08 August 2010 - 08:13 AM

No problem. :bananaman:

I would recommend using [ code] and [ /code] tags
(without the spaces) when posting your code on the forum
as it becomes easier to spot the problems and easier
to copy/paste scripts for local testing.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1