[javascript] onChange and Calculating Fields

February 4, 2012

I am trying to write a html page with 3 fields that a user can choose to input a number into any of the three fields and the calculations are instantly performed and displayed.

The first field is a number. The second field is that first field multiplied by 5. The third field is the square root of the first field.

I've been tripped up on a couple issues as I'm new to javascript and have only taken a few programming classes in the past.

1) My first stumbling block, the onChange command. Couldn't get it working so I instead discovered and have used onFocus and onBlur. Anyone have a good tutorial on how to use onChange correctly? w3schools only confused me more with their explanation.

2) What approach should I use to allow a number to be entered into any of the three fields and have necessary calculations be displayed in all the fields?

3) I'm not asking for anyone to write this script out for me. I'm a beginner trying to complete this as an assignment for one of my classes. I'm looking for advice and guidance on how to make this work. What I've written so far is pasted below. The script works if a number is entered into the first box, but I need to be able to have a number entered into any of the boxes and have the calculations displayed instantly and I would appreciate any feedback on my mistakes.

&lt;HTML&gt;
  &lt;HEAD&gt;
	&lt;SCRIPT LANGUAGE="JavaScript"&gt;
// 2nd box is 5 times the value of the number in box 1
function calcMultiply() {
  one = document.myForm.inputBox1.value;
  document.myForm.inputBox2.value = (one * 5);
}
// 3rd box that equals the square root of number in box 1
function calcSquareRoot(){
  document.myForm.inputBox3.value = Math.sqrt(one);
}
	&lt;/SCRIPT&gt;
  &lt;/HEAD&gt;

&lt;BODY onLoad ="document.myForm.inputBox2.focus()"&gt;
&lt;div style="width: 200px; text-align: center;"&gt;
&lt;form name="myForm"&gt;

&lt;!-- First box can have any number entered to be calculated --&gt;
&lt;P&gt; A Number: &lt;/P&gt;
&lt;input class="right" type=text name="inputBox1" value=""&gt;&lt;BR&gt;

&lt;!-- 2nd box must be 5 times the value of  number in the first box --&gt;
&lt;P&gt; Number Multiplied by 5: &lt;/P&gt;
&lt;input class="right" type=text name="inputBox2" value="" onFocus="calcMultiply();" onBlur="calcMultiply();"&gt;&lt;BR&gt;

&lt;!-- 3rd box must be the square root of number in the first box --&gt;
&lt;P&gt; Square Root of the Number: &lt;/P&gt;
&lt;input class="right" type=text name="inputBox3" value="" onFocus="calcSquareRoot();" onBlur="calcSquareRoot();"&gt;&lt;BR&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

Thank you.

February 4, 2012

1) My first stumbling block, the onChange command. Couldn't get it working so I instead discovered and have used onFocus and onBlur. Anyone have a good tutorial on how to use onChange correctly?

Your problem might be that onchange only fires when one has finished editing a field. It's similar to onblur, except it fires only if contents has been changed. It isn't exactly instant, whatsoever.

w3schools only confused me more with their explanation.

By somewhat popular convention, W3Schools is a resource frowned upon. It's also not related to W3C at all. It may be ok to use when one's just forgetting things but not when learning for the first time.

Might want to see http://www.neowin.ne...06-xhtmlcssxml/ , where a lot helpful Neowinians each have listed their most useful website building help & resources.

2) What approach should I use to allow a number to be entered into any of the three fields and have necessary calculations be displayed in all the fields?

Use onkeyup event. That one will fire on everything except for cutting, copying and pasting using a mouse (where onmouseup doesn't help either).

Like this:

&lt;input class="right" type=text name="inputBox1" value="" onkeyup="calcMultiply(); calcSquareRoot();"&gt;&lt;BR&gt;

Or more to my XHTML Strict liking (see recommendations below):

&lt;input type="text" name="inputBox1" value="" style="text-align: right" onkeyup="calcMultiply(); calcSquareRoot();" /&gt;&lt;br /&gt;

I would appreciate any feedback on my mistakes.

Your markup and code is full of all kinds of errors. It works only because browsers are exceptionally forgiving (a feature that backfires horribly when you least expect it). Of course, it doesn't matter much if this is just a flyby course and you're not about to use it ever again. In all other cases I'd suggest visiting the thread linked above, check basic things like standards and their related doctypes and finally grind your pages through the W3C Validator (http://validator.w3.org/). It might seem like a major case of OCD - why bother if it works as it is - but it does help a lot when it suddenly doesn't.

February 4, 2012

Thank you cralias for taking the time to help me out! I am still unsuccessful in my attempt to have all three fields calculated when a number is entered into any one of them. But it will be something I'll revisit later and hopefully be able to get working once I understand Javascript better.

I picked up the book Javascript: A Beginner's Guide to help me with the fundamentals and to get a decent foundation for the language. Scripting/coding in general is something I have little interest in and continually struggle with, but since I'm taking this class which covers Javascript, I want to have a solid understanding of it.

Again I want to thank you cralias for your assistance and advice. Especially the w3 validator, as I was able to clean up my code quite a bit after running it through the validator a couple times. Here's what my script looks like now in case anyone is curious. It doesn't meet all of the requirements for my assignment but it close enough to being acceptable.

&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;SCRIPT TYPE="text/javascript"&gt;
// 1st box, 2nd box value / 5 and 3rd box value * 3rd box value
function calcBoxOne() {
one = document.myForm.inputBox2.value;
document.myForm.inputbox1.value = (two / 5 || three * three);
}

// 2nd box is 5 times the value of the number in box 1
function calcMultiply() {
two = document.myForm.inputBox1.value;
document.myForm.inputBox2.value = (one * 5 || three * three);
}

// 3rd box that equals the square root of number in box 1
function calcSquareRoot(){
one = document.myForm.inputBox1.value;
document.myForm.inputBox3.value = Math.sqrt(one);
three = document.myForm.inputBox3.value;
}
  &lt;/SCRIPT&gt;

  &lt;TITLE&gt;
  Assignment 4
  &lt;/TITLE&gt;
  &lt;/HEAD&gt;

&lt;BODY onLoad ="document.myForm.inputBox2.focus()"&gt;
&lt;div style="width: 200px; text-align: center;"&gt;
&lt;form name="myForm"&gt;
&lt;!-- First box can have any number entered to be calculated --&gt;
&lt;P&gt; A Number: &lt;/P&gt;
&lt;input class="right" type="text" name="inputBox1" value="" onChange="calcBoxOne();" onFocus="calcBoxOne();"&gt;&lt;BR&gt;

&lt;!-- 2nd box must be 5 times the value of  number in the first box --&gt;
&lt;P&gt; Number Multiplied by 5: &lt;/P&gt;
&lt;input class="right" type="text" name="inputBox2" value="" onChange="calcMultiply();" onFocus="calcMultiply();"&gt;&lt;BR&gt;

&lt;!-- 3rd box must be the square root of number in the first box --&gt;
&lt;P&gt; Square Root of the Number: &lt;/P&gt;
&lt;input class="right" type="text" name="inputBox3" value="" onChange="calcSquareRoot();" onFocus="calcSquareRoot();"&gt;&lt;BR&gt;
&lt;/FORM&gt;
&lt;/DIV&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

Sign In

[javascript] onChange and Calculating Fields

Question

Scotch Tape

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Phouchg

Link to comment

Share on other sites

Scotch Tape

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Company

Community

Social

Partners

Forums

News

Features

More

Themes