incrementing variables in javascript

[mantrid]

Hello
I have the following code, where clicking yh1r is supposed to move h1 10px
down and update the value of yh1 by 20 each time its clicked.
what the code actually does is NOT move h1 and instead of incrementing yh1
from 0 to 20 to 40 etc it doubles it and appends it to the original value
each time eg 0 to 20 to 4020 to 804020 to 160804020

<div id='h1' style='position:absolute; top:<?php echo $yh1/2;?>px; <?php
$h1; ?></div>
<input name="yh1" id="yh1" type="text" class="BodyText" value="<?php echo
$yh1; ?>" size="1">
<input name="yh1r" id="yh1r" type='button' class="BodyText"
onClick="yh1move(10)" value='>'>
function yh1move(amount) {
var yh1val=document.form2.yh1.value;
yh1val += amount;
h1.style.top =yh1val+'px';
document.form2.yh1.value = yh1val*2;
}
but when I give yh1val a numerical value to start, as below it works

var yh1val = 0;
function yh2move(amount) {
yh1val += amount;
h2.style.top =yh1val+'px';
document.form2.yh2.value = yh1val*2;
}
can anyone see what the problem is?
Ian

[web.dev]

mantrid wrote:

Hello
I have the following code, where clicking yh1r is supposed to move h1 10px
down and update the value of yh1 by 20 each time its clicked.
what the code actually does is NOT move h1 and instead of incrementing yh1
from 0 to 20 to 40 etc it doubles it and appends it to the original value
each time eg 0 to 20 to 4020 to 804020 to 160804020

var yh1val=document.form2.yh1.value;
yh1val += amount;
h1.style.top =yh1val+'px';
document.form2.yh1.value = yh1val*2;

can anyone see what the problem is?
Ian

When you get the value from your form, the value is a string.
Therefore, when you thought were you adding, you were really in fact
concatenating strings. Converting the value to a numerical form will
fix this.

[mantrid]

Thaks Web that did it.
Im suprised that it can tell an integer automatically
"web.dev" <we********@gmail.comwrote in message
news:11**********************@75g2000cwc.googlegro ups.com...

>
mantrid wrote:

Hello
I have the following code, where clicking yh1r is supposed to move h1

10px

down and update the value of yh1 by 20 each time its clicked.
what the code actually does is NOT move h1 and instead of incrementing

yh1

from 0 to 20 to 40 etc it doubles it and appends it to the original

value

each time eg 0 to 20 to 4020 to 804020 to 160804020

var yh1val=document.form2.yh1.value;
yh1val += amount;
h1.style.top =yh1val+'px';
document.form2.yh1.value = yh1val*2;

can anyone see what the problem is?
Ian

When you get the value from your form, the value is a string.
Therefore, when you thought were you adding, you were really in fact
concatenating strings. Converting the value to a numerical form will
fix this.

[RobG]

mantrid wrote:

Thaks Web that did it.
Im suprised that it can tell an integer automatically

Please don't top-post here. Reply below a trimmed quote of what you
are replying to.

JavaScript doesn't "tell an integer" automatically - it follows strict
rules on how to apply operators to variables.

The "+" operator is overloaded, it can mean (amongst other things)
arithmetic addition or string concatenation. Variables in JavaScript
aren't typed, so in order to work out how to apply the "+" operator in
a given situation the script engine looks at the values of the
variables that the "+" operator is applied to. It works from left to
right evaluating the result as it goes. If any variable is a string,
concatenation is inferred from that point on and a string is returned,
even if the remaining variables are numbers.

If all the variables are numbers, then addition is inferred and a
number is returned. If any of them are something other than string or
number primitives, other rules apply (read the relevant part ECMAScript
Language spec, I'm not going to cover them all here).

e.g.:

var a = "1"; // string
var b = 2; // number
var c = 4; // number

alert( a + b ) // since a is a string, "12" will be displayed
alert( b + c ) // b and c are both numbers, so "6" will be displayed
alert( a + b + c ) // a is a string, so "124" is displayed.
alert( b + c + a ) // b and c are added. Since a is a string the
// result is converted to a string, a is
// concatenated and "61" is displayed.
alert( b + c + a + c + b ) // shows 6142

The simplest way to convert a string to a number is to prefix it with
'+' as a unary operator (I did say it was overloaded :-) ):

alert( +a + b + c) // shows 7
alert( b + c + +a) // shows 7
HTH
--
Rob

[mantrid]

"RobG" <rg***@iinet.net.auwrote in message
news:11**********************@p79g2000cwp.googlegr oups.com...

mantrid wrote:

Thaks Web that did it.
Im suprised that it can tell an integer automatically

Please don't top-post here. Reply below a trimmed quote of what you
are replying to.

JavaScript doesn't "tell an integer" automatically - it follows strict
rules on how to apply operators to variables.

The "+" operator is overloaded, it can mean (amongst other things)
arithmetic addition or string concatenation. Variables in JavaScript
aren't typed, so in order to work out how to apply the "+" operator in
a given situation the script engine looks at the values of the
variables that the "+" operator is applied to. It works from left to
right evaluating the result as it goes. If any variable is a string,
concatenation is inferred from that point on and a string is returned,
even if the remaining variables are numbers.

If all the variables are numbers, then addition is inferred and a
number is returned. If any of them are something other than string or
number primitives, other rules apply (read the relevant part ECMAScript
Language spec, I'm not going to cover them all here).

e.g.:

var a = "1"; // string
var b = 2; // number
var c = 4; // number

alert( a + b ) // since a is a string, "12" will be displayed
alert( b + c ) // b and c are both numbers, so "6" will be displayed
alert( a + b + c ) // a is a string, so "124" is displayed.
alert( b + c + a ) // b and c are added. Since a is a string the
// result is converted to a string, a is
// concatenated and "61" is displayed.
alert( b + c + a + c + b ) // shows 6142

The simplest way to convert a string to a number is to prefix it with
'+' as a unary operator (I did say it was overloaded :-) ):

alert( +a + b + c) // shows 7
alert( b + c + +a) // shows 7
HTH
--
Rob

I used
parseInt(myvar).
Is
+myvar better, or is there no difference?
Ian

[RobG]

mantrid wrote:

"RobG" <rg***@iinet.net.auwrote in message

[...]

The simplest way to convert a string to a number is to prefix it with
'+' as a unary operator (I did say it was overloaded :-) ):

[...]

>
I used
parseInt(myvar).
Is
+myvar better, or is there no difference?

You should always use parseInt() with a radix - assuming you want base
10:

parseInt(myvar, 10);

otherwise strings with leading zeros will be inerpreted as octal, try:

alert(
'parseInt(\'08\'): ' + parseInt('08')
+ '\nparseInt(\'019\'): ' + parseInt('019')
+ '\nparseInt(\'019\', 10): ' + parseInt('019', 10)
);
Whether '+' is better depends on the metric - it may be faster (I doubt
you'll notice either way), it's certainly fewer keystrokes and you
don't need to deal with the radix issue. parseInt() might be more
obvious for maintenance.
--
Rob

[Dr John Stockton]

JRS: In article <11**********************@p79g2000cwp.googlegroups .com>
, dated Wed, 9 Aug 2006 18:22:15 remote, seen in
news:comp.lang.javascript, RobG <rg***@iinet.net.auposted :

>The "+" operator is overloaded, it can mean (amongst other things)
arithmetic addition or string concatenation. Variables in JavaScript
aren't typed,

Better I think to say "Identifiers"; Javascript variables contain a type
indication at run-time, whereas Pascal ones do not, but their type is
known at compile time.

so in order to work out how to apply the "+" operator in
a given situation the script engine looks at the values of the
variables that the "+" operator is applied to. It works from left to
right evaluating the result as it goes. If any variable is a string,
concatenation is inferred from that point on and a string is returned,
even if the remaining variables are numbers.

Except for the effects of unary +, which numberises its argument; and
the effects of parentheses - "Fred" + (1+2) is Fred3 not Fred12.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Delphi 3 Turnpike 4 ©
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.bancoems.com/CompLangPascalDelphiMisc-MiniFAQ.htmclpdmFAQ;
<URL:http://www.borland.com/newsgroups/guide.htmlnews:borland.* Guidelines

[Dr John Stockton]

JRS: In article <11*********************@m73g2000cwd.googlegroups. com>,
dated Thu, 10 Aug 2006 04:00:35 remote, seen in
news:comp.lang.javascript, RobG <rg***@iinet.net.auposted :

>
Whether '+' is better depends on the metric - it may be faster (I doubt
you'll notice either way), it's certainly fewer keystrokes and you
don't need to deal with the radix issue. parseInt() might be more
obvious for maintenance.

Unary + is believed to be fastest in execution.
Bur parseInt(S, 10) happily ignores trailing non-digits, which is useful
in reading such as "14px".

If S is "1e6", parseInt(S) < parseFloat(S)

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/- FAQish topics, acronyms, & links.
I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/>

[Lasse Reichstein Nielsen]

Dr John Stockton <jr*@merlyn.demon.co.ukwrites:

JRS: In article <11**********************@p79g2000cwp.googlegroups .com>
, dated Wed, 9 Aug 2006 18:22:15 remote, seen in
news:comp.lang.javascript, RobG <rg***@iinet.net.auposted :

>>The "+" operator is overloaded, it can mean (amongst other things)
arithmetic addition or string concatenation. Variables in JavaScript
aren't typed,

Better I think to say "Identifiers";

I would use "identifier" about the variable's name. A variable is
something whose value can change, and it has a name for reference.

Javascript variables contain a type indication at run-time, whereas
Pascal ones do not, but their type is known at compile time.

Javascript variables has no type, at compile or run-time, but the
value the variable is bound to at any given time does.

>so in order to work out how to apply the "+" operator in
a given situation the script engine looks at the values of the
variables that the "+" operator is applied to. It works from left to
right evaluating the result as it goes. If any variable is a string,
concatenation is inferred from that point on and a string is returned,
even if the remaining variables are numbers.

Except for the effects of unary +, which numberises its argument; and
the effects of parentheses - "Fred" + (1+2) is Fred3 not Fred12.

Indeed, the behavior of the binary plus operator depends on the types
of its operands. What those operands are is determined the usualy way,
using associativity and precedence of other operators in the
expression, including parentheses. The associativity of operators is
often left to right.

In the example above, the operands of the second plus is 1 and 2, both
numbers, so the result is 3. The operands of the first plus is the
string "Fred" and the number 3, so the result is "Fred3".

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'