By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,911 Members | 1,170 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,911 IT Pros & Developers. It's quick & easy.

Conditional shortcut (?:) limitations?

P: n/a
I just wrote the following script for something I'm working on:
----------------------------------------------------------------------------
-------------------
<html>
<head>
<script type="text/javascript">
function KP_growit(subject,widthto,heightto) {
var target = document.getElementById(subject);
var tweenit = setInterval(grower,10);

function grower() {
(parseInt(target.style.width) < widthto)? target.style.width =
(parseInt(target.style.width) + 10) + "px";
(parseInt(target.style.height) < heightto)? target.style.height =
(parseInt(target.style.height) + 10) + "px";
(parseInt(target.style.width) == widthto && parseInt(target.style.height)
== heightto)? clearInterval(tweenit);
}
}
</script>
</head>
<body>
<div id="bluebox" style="position:absolute; left:173px; top:48px;
width:100px; height:80px; z-index:1; background-color:#99CCFF;"></div>
<div><a href="#" onClick="KP_growit('bluebox',400,300); return false;">grow
it</a></div>
</body>
</html>
----------------------------------------------------------------------------
--------------------------------------------
I noticed that the script does not work because of the conditional
operators; however it DOES work when using the if...else format. Why is
this? Can someone please help. Thanks.
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
TheKeith wrote:
I just wrote the following script for something I'm working on:
----------------------------------------------------------------------------
-------------------
<html>
<head>
<script type="text/javascript">
function KP_growit(subject,widthto,heightto) {
var target = document.getElementById(subject);
var tweenit = setInterval(grower,10);

function grower() {
(parseInt(target.style.width) < widthto)? target.style.width =
(parseInt(target.style.width) + 10) + "px";
(parseInt(target.style.height) < heightto)? target.style.height =
(parseInt(target.style.height) + 10) + "px";
(parseInt(target.style.width) == widthto && parseInt(target.style.height)
== heightto)? clearInterval(tweenit);
}
} function grower() {
(parseInt(target.style.width) < widthto)? target.style.width =
(parseInt(target.style.width) + 10) + "px": true;
(parseInt(target.style.height) < heightto)? target.style.height =
(parseInt(target.style.height) + 10) + "px" : true;
(parseInt(target.style.width) == widthto && parseInt(target.style.height)
== heightto)? clearInterval(tweenit) : true;
}
} </script>
</head>
<body>
<div id="bluebox" style="position:absolute; left:173px; top:48px;
width:100px; height:80px; z-index:1; background-color:#99CCFF;"></div>
<div><a href="#" onClick="KP_growit('bluebox',400,300); return false;">grow
it</a></div>
</body>
</html>
----------------------------------------------------------------------------
--------------------------------------------
I noticed that the script does not work because of the conditional
operators; however it DOES work when using the if...else format. Why is
this?

Note the *: true* addition behind each ? ... statement. It *is* ? : and not
? by itself. My debugger picked up on that immediately.

Fermin DCG
Jul 20 '05 #2

P: n/a

"F. Da Costa" <da*****@xs4all.nl> wrote in message
news:40*********************@news.xs4all.nl...
TheKeith wrote:
I just wrote the following script for something I'm working on:
--------------------------------------------------------------------------

--
-------------------
<html>
<head>
<script type="text/javascript">
function KP_growit(subject,widthto,heightto) {
var target = document.getElementById(subject);
var tweenit = setInterval(grower,10);

function grower() {
(parseInt(target.style.width) < widthto)? target.style.width =
(parseInt(target.style.width) + 10) + "px";
(parseInt(target.style.height) < heightto)? target.style.height =
(parseInt(target.style.height) + 10) + "px";
(parseInt(target.style.width) == widthto && parseInt(target.style.height) == heightto)? clearInterval(tweenit);
}
}

function grower() {
(parseInt(target.style.width) < widthto)? target.style.width =
(parseInt(target.style.width) + 10) + "px": true;
(parseInt(target.style.height) < heightto)? target.style.height =
(parseInt(target.style.height) + 10) + "px" : true;
(parseInt(target.style.width) == widthto &&

parseInt(target.style.height) == heightto)? clearInterval(tweenit) : true;
}
}
</script>
</head>
<body>
<div id="bluebox" style="position:absolute; left:173px; top:48px;
width:100px; height:80px; z-index:1; background-color:#99CCFF;"></div>
<div><a href="#" onClick="KP_growit('bluebox',400,300); return false;">grow it</a></div>
</body>
</html>
--------------------------------------------------------------------------

--
--------------------------------------------
I noticed that the script does not work because of the conditional
operators; however it DOES work when using the if...else format. Why is
this?

Note the *: true* addition behind each ? ... statement. It *is* ? : and

not ? by itself. My debugger picked up on that immediately.

Much appreciated--but I'm still confused as to why that is required. If I
can do conditionals in the if...else format without the else statement, why
can't I do the same with ?: operator shortcut? Also, why does it have to be
the word *true*--I tried it with just putting anything behind the *:*, like
*: var hello = "hello"* for example, and that still causes an error--why is
this?
Jul 20 '05 #3

P: n/a
On Sun, 1 Feb 2004 17:05:41 -0500, TheKeith <no@spam.com> wrote:

[snip]
Much appreciated--but I'm still confused as to why that is required. If I
can do conditionals in the if...else format without the else statement,
why can't I do the same with ?: operator shortcut?
It's not a shortcut; it's a ternary operator. Unary operators, like !,
require one operand. Binary operators, like +, require two operands.
Ternary operators, like ?:, require three. Only using two operands with
them is like trying to use:

var a = b *; // or a = * b;
Also, why does it have to be the word *true*--I tried it with just
putting anything behind the *:*, like *: var hello = "hello"* for
example, and that still causes an error--why is this?


The syntax of the operator is:

(expr) ? (if-true expr) : (if-false expr)

The first expression is evaluated. If it is considered true, the second
operand (if-true expr) is evaluated and returned. If the first expression
is considered false, the third operand (if-false expr) is evaluated and
returned.

The main use for the operator is conditional assignment. Say, for example,
you wanted to ensure that an argument in a function is always valid[1]:

function a( x ) {
x = (undefined == x) ? 0 : x;
}

a();

Here, no argument was passed to function a(), so the expression (undefined
== x) will evaluate to true. This means that the operator, as a whole,
will evaluate to 0 and 0 will be assigned to x.

a( 6 );

Here, (undefined == x) will evaluate as false because x is 6. The
operator, as a whole, will evaluate to 6, so 6 will be assigned to x.

If you are just wanted to do perform something based on a certain
condition, then just use an if statement. If you want an expression to
evaluate to a different value based on a condition, then use the
conditional operator.

I suggest you take a look at a JavaScript reference. Try:

http://devedge.netscape.com/library/...1.5/reference/

Beware of URL wrap.

Mike

[1] This isn't a particularly good example, but it's late and I'm tired,
so bear with me :)

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #4

P: n/a

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:op**************@news-text.blueyonder.co.uk...
On Sun, 1 Feb 2004 17:05:41 -0500, TheKeith <no@spam.com> wrote:

[snip]
Much appreciated--but I'm still confused as to why that is required. If I can do conditionals in the if...else format without the else statement,
why can't I do the same with ?: operator shortcut?


It's not a shortcut; it's a ternary operator. Unary operators, like !,
require one operand. Binary operators, like +, require two operands.
Ternary operators, like ?:, require three. Only using two operands with
them is like trying to use:

var a = b *; // or a = * b;
Also, why does it have to be the word *true*--I tried it with just
putting anything behind the *:*, like *: var hello = "hello"* for
example, and that still causes an error--why is this?


The syntax of the operator is:

(expr) ? (if-true expr) : (if-false expr)

The first expression is evaluated. If it is considered true, the second
operand (if-true expr) is evaluated and returned. If the first expression
is considered false, the third operand (if-false expr) is evaluated and
returned.

The main use for the operator is conditional assignment. Say, for example,
you wanted to ensure that an argument in a function is always valid[1]:

function a( x ) {
x = (undefined == x) ? 0 : x;
}

a();

Here, no argument was passed to function a(), so the expression (undefined
== x) will evaluate to true. This means that the operator, as a whole,
will evaluate to 0 and 0 will be assigned to x.

a( 6 );

Here, (undefined == x) will evaluate as false because x is 6. The
operator, as a whole, will evaluate to 6, so 6 will be assigned to x.

If you are just wanted to do perform something based on a certain
condition, then just use an if statement. If you want an expression to
evaluate to a different value based on a condition, then use the
conditional operator.

that cleared it up--thanks a lot.
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.