Simple Javascript question

Y

yoyo1234

Registered
I am trying to write what should be an incredibly easy script and cannot get it working on either Mozilla or IE.

Description:
1. User enters a number in the first textfield representing ounces.
2. User clicks out of the textfield and the number is converted from ounces to grams in a second textfield.

Sounds easy, but I cannot get it working for some reason. Can someone help me. I plan on adding approx 5 or 6 more conversions to the same form.

Below is the html I have been using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" language="Javascript">
function calc(val,factor,result) {
test = val.value*factor
test2 = test.toPrecision(4)
document.forms.converter.result.value = test2
}
</script>
</head>
<body>
<form name="converter">
<input name="floz" type="text" onchange="calc(this, 28.349523125, 'grams')"> oz
<input name="grams" type="text">
</form>
</body>
</html>
 
Try the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" language="Javascript">
function calc(val,factor,result) {
test = val.value*factor
test2 = test.toPrecision(4)
result.value = test2
}
</script>
</head>
<body>
<form name="converter">
<input name="floz" type="text" onchange="calc(this, 28.349523125, document.converter.grams)"> oz
<input name="grams" type="text">
</form>
</body>
</html>


You can't pass a text string and then use that to access a form element; the browser was looking for a form element called "result". Instead, pass the actual form element itself.

And here's a tip for javascript programming: use mozilla. If you have problems, type "javascript:"(without the underscores, for some reason the board adds underscores) in the location bar, and a handy debugger pops up. Usually tells you exactly where the problem is.

-=-raptur-=-
 
Remember... you must end any lines that don't start a block of code in curly brackets with a semicolon, including your call to onchange.
 
Your suggestions worked, but it only works in Mozilla. IE and Safari do not pass the numbers correctly.

I have added a link here showing my problem.

Using either IE or Satari, enter a number in any of the textfields on the left and click one of the textfields on the right. Notice the converted number is not being displayed on the right.

Please help :confused:
 
You apparently didn't listen to me. You should do your JS script like this:
Code: 
<script type="text/javascript" language="Javascript">
function calc(val,factor,result) {
	test = val.value*factor;
	test2 = test.toPrecision(4);
	result.value = test2;
}

function SGConvert(val,result) {	
	test = (val.value - 1) / .0074	;
	test2 = test.toPrecision(4);
	result.value = test2;
}

</script>
Note the semicolons. Without these, the browser will think all your lines of code are just one line and it won't interpret them correctly.
 
Thanks. I forgot to add the ";"

I've added them, but i am still seeing odd behavior:
1. Works fine in Mozilla v1.3 (Mac) and v1.4 (Win XP Pro)
2. Works fine in IE 6 (Win XP Pro)
3. Does not work in IE (v5.23 Mac)
4. Does not work in Safari(v1.1 Mac).

Any other suggestions?
 
I have been narrowing down the problems, and discovered it is the toPrecision() and toFixed() methods that are causing my problem. Once I commented that line out, everything works in all my browsers. After further testing I think it may be a defect in the WebKit core used in Safari and Omniweb 4.5. Therefore, I was wondering if someone else is able to recreate my problem?

Can someome try to figure out how to use the toPrecision() and toFixed() methods in Safari or OmniWeb 4.5?

Here is the most current version of the document I am testing with.

yoyo1234 said:
Thanks. I forgot to add the ";"

I've added them, but i am still seeing odd behavior:
1. Works fine in Mozilla v1.3 (Mac) and v1.4 (Win XP Pro)
2. Works fine in IE 6 (Win XP Pro)
3. Does not work in IE (v5.23 Mac)
4. Does not work in Safari(v1.1 Mac).

Any other suggestions?
Click to expand...
 
This page should give you some insight on rounding your numbers to so many decimal places (I wouldn't go more than 2 or 3).

Also, you should set it up so the conversion will work backwards, so I could convert from grams to ounces as well as vice versa.
 
I have compiled all of your suggestions and came up with this.

My goal was to create an idiot-proof unit converter for my homemade wine website. I also needed a way for a person to be able to display more than one conversion at the same time. Most of my users are not very computer savy so I wanted make it as easy to use as possible; i.e. no menus, buttons, etc. I realize it still needs some visual work with CSS, but it functions as I wanted/expected.

Here are the modifications I added:
1. All of the textfields on the right are read only on purpose to protect the conversion results and force people to enter numbers in the textfields on the left.
2. Added tabindex numbers to the textfields on the left so they tab in a logical order.
3. Rounded all the results to the .xx decimal place.

Thanks again for all of your assistance :cool:


Comment? Suggestions on improvements?
 
Awesome! It works quite well. The only thing I'd add, if possible, would be something that would do the conversion as they enter it, but that's minor since it will show up as soon as they do anything else.

Keep on truckin'! :)
 
You must log in or register to reply here.
Back
Top