• 0

onChange and Calculating Fields

Asked by Scotch Tape,

 Share

Question

Rookie

Scotch Tape

Posted
Posted

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.

<HTML>
  <HEAD>
	<SCRIPT LANGUAGE="JavaScript">
// 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);
}
	</SCRIPT>
  </HEAD>

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

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

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

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

Thank you.

Link to comment
https://www.neowin.net/forum/topic/1055910-onchange-and-calculating-fields/
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Grand Master

Phouchg

Posted
Posted

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:

<input class="right" type=text name="inputBox1" value="" onkeyup="calcMultiply(); calcSquareRoot();"><BR>

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

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

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.

  • 0
Rookie

Scotch Tape

Posted
  • Author
Posted

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.

<!DOCTYPE HTML>
<HTML>
  <HEAD>
  <SCRIPT TYPE="text/javascript">
// 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;
}
  </SCRIPT>

  <TITLE>
  Assignment 4
  </TITLE>
  </HEAD>

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

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

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

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • what other retro software do yall use

      By +InsaneNutter · Posted

      At work we still have a couple of people that use a version of AutoCAD LT purchased in 1994. This predates Windows 95 and works fine on versions of Windows up to XP. Its long since run in an locked down isolated XP VM, accessible via RDP. I did install LibreCAD for them, however they said it was just too different to get to grips with. In all fairness one of them is now 75 and the other is almost 60.
    • what other retro software do yall use

      By He's Dead Jim · Posted

      On my music making (non internet) PC Sony Acid Pro 7.0 Adobe Audition 2015 Korg Legacy Collection Windows 7 SP1
    • Microsoft releases major feature updates for stock Windows 11 apps

      By PurSpyk · Posted

      Anyway to download these versions without being on the Experimental builds?
    • Microsoft about to radically change how often your Edge browser updates

      By testman · Posted

      Nothing is stopping you from continuing with your testing cadence. If updates are released every 2 weeks instead of 4, and you test once every 4 weeks, the exact same amount of patches will still be available for you in those 4 weeks. For example: Before 4th week - patch 1, 2, 3, 4 After 2nd week - patch 1 and 2 4th week - patch 3 and 4 Still the same amount after 4.
    • Microsoft about to radically change how often your Edge browser updates

      By testman · Posted

      Everyone else has said it. I'm gonna say it - you don't know what you're talking about. I do. I have two laptops. One work, one personal. I have access to two more laptops - both personal. At home I manually update my personal laptop when I see on Neowin that there is an update - I carry on and only apply the updates when I am ready. My work one only updates when my workplace decides to send it - I carry on and only apply the updates (when they actually arrive, which is usually days after the release) when I switch off the laptop at the end of the day as usual. The two other personal laptops only get updated when I get to it which is rarely - the people who own them carry on using them until I get to it and update them. All of the browsers on all laptops are configured to restore the tabs when launched. Google and Microsoft have changed from 6 weeks to 4, and it looks like it's going to move to 2. None of these changes affect how any of these browsers on the laptops are used. Not one jot. My advice to you is stop panicking whenever you see an update. Just carry on with what you're doing. This even benefits you in a way - from your comment you sound like you don't like the changes or the frivolous new features - great - then carry on as before!

  • Recent Achievements

    • Week One Done
      Jeroen Wilms earned a badge
      Week One Done
    • Week One Done
      rolfus earned a badge
      Week One Done
    • One Month Later
      Leroy Jethro Gibbs earned a badge
      One Month Later
    • Conversation Starter
      flexorcist earned a badge
      Conversation Starter
    • One Month Later
      AndreaB earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      509
    2. 2
      +Edouard
      198
    3. 3
      PsYcHoKiLLa
      138
    4. 4
      ATLien_0
      90
    5. 5
      Steven P.
      81
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!