Strange behaviour in IF/ELSE blocks...

R

Raoul Borges

Hi!

I have a simple IF/ELSE IF/ELSE block, and it won't work as I hoped:

K_IMG_RED(), K_IMG_BLUE() are function that returns either 1 or 2
(the numbers). I use them as constants.

================================

if( p_iImg == K_IMG_RED() ) /* LINE 0*/
{
oBody.className = 'cssRed' ; /* LINE 1*/
}
else if( p_iImg == K_IMG_BLUE() ) /* LINE 2*/
{
oBody.className = 'cssBlue' ; /* LINE 3*/
}
else
{
oBody.className = 'cssNormal' ; /* LINE 4*/
}

================================

If I try it on IE 5.5, it works (see the complete source
below), but on a Mozilla, the last "else" block is always
executed, no matter the fact that the first (or the second)
"if" condition was true!

Seen in Venkman, debugged line by line, here is the progression (if "p_iImg == 1"
is true):

Line 0 : " p_iImg == K_IMG_RED() " is true.
Line 1 : "oBody.className = 'cssRed' ;" the class of <body> is correctly updated
Line 4 : "oBody.className = 'cssNormal' ;" the class of <body> is updated AGAIN!

I just read, and read again the code, and have shown in to other
developpers, but I found no solution. I keep believing something in the
source just escape my eyes (too much diet coke?), but the "if" blocs seem
quite ok to me...

Below is the complete code (in a simple HTML page), who works
correctly in IE, but not in Mozilla.

Thanks for your help

Raoul Borges
-- To email me, remove the Xs from my email adress


========================================================

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script language="javascript" type="text/javascript">

function K_IMG_NORMAL() { return 0 ; }
function K_IMG_RED() { return 1 ; }
function K_IMG_BLUE() { return 2 ; }

function updateHTML(p_iImg)
{
try
{
var oBody = document.getElementById('ID_Body') ;

if( p_iImg == K_IMG_RED() )
{
oBody.className = 'cssRed' ;
}
else if( p_iImg == K_IMG_BLUE() )
{
oBody.className = 'cssBlue' ;
}
else
{
oBody.className = 'cssNormal' ;
}
}
catch(e)
{
throw window.name + '::updateHTML([' + p_iImg + ']):\n{\n' + e + '\n}' ;
}
}
</script>
<style>
..cssNormal
{
background-color = #FFFFFF ;
}

..cssRed
{
background-color = #FF0000 ;
}

..cssBlue
{
background-color = #0000FF ;
}
</style>
</head>
<body id="ID_Body" class="cssNormal">

<a href="javascript: updateHTML(0)">updateHTML(0)</a><br />
<a href="javascript: updateHTML(1)">updateHTML(1)</a><br />
<a href="javascript: updateHTML(2)">updateHTML(2)</a><br />

</body>
</html>

========================================================
 
M

Martin Honnen

Raoul Borges wrote:

<style>
.cssNormal
{
background-color = #FFFFFF ;
Click to expand...

That is not CSS you need
background-color: #FFFFF;
the same for the other rules below.
 
R

Raoul Borges

By the way, it was tested on IE 5.5 and Mozilla 1.7


-- Raoul Borges
To email me, remove the Xs from my email adress.
 
K

kaeli

Hi!


If I try it on IE 5.5, it works
Click to expand...

Not with the right doctype, it doesn't. You're doing something that uses
quirks mode.

(see the complete source
below), but on a Mozilla, the last "else" block is always
executed,
Click to expand...

No it isn't. Put an alert in there.

You get the same results in IE6 and Mozilla (well, Netscape 7.1) with
this code. Not that it works. It doesn't. But it might help you narrow
down the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="javascript" type="text/javascript">

function K_IMG_NORMAL() { return 0 ; }
function K_IMG_RED() { return 1 ; }
function K_IMG_BLUE() { return 2 ; }

function updateHTML(p_iImg)
{
try
{
var oBody = document.getElementById('ID_Body') ;

if( p_iImg == K_IMG_RED() )
{
oBody.className = 'cssRed' ;
alert(oBody.className);

}
else if( p_iImg == K_IMG_BLUE() )
{
oBody.className = 'cssBlue' ;
alert(oBody.className);

}
else
{
oBody.className = 'cssNormal' ;
alert(oBody.className);

}
}
catch(e)
{
throw window.name + '::updateHTML([' + p_iImg + ']):\n{\n' + e +
'\n}' ;
}
}
</script>
<style>
..cssNormal
{
background-color = #FFFFFF ;
}

..cssRed
{
background-color = #FF0000 ;
}

..cssBlue
{
background-color = #0000FF ;
}
</style>
</head>
<body id="ID_Body" class="cssNormal">

<a href="javascript: updateHTML(0)">updateHTML(0)</a><br>
<a href="javascript: updateHTML(1)">updateHTML(1)</a><br>
<a href="javascript: updateHTML(2)">updateHTML(2)</a><br>

</body>
</html>

--
 
K

kaeli

Not with the right doctype, it doesn't. You're doing something that uses
quirks mode.
Click to expand...

Using Martin's suggestion, which I can't believe I didn't catch (bad
me), it worked in IE6 and NN7.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="javascript" type="text/javascript">

function K_IMG_NORMAL() { return 0 ; }
function K_IMG_RED() { return 1 ; }
function K_IMG_BLUE() { return 2 ; }

function updateHTML(p_iImg)
{
try
{
var oBody = document.getElementById('ID_Body') ;

if( p_iImg == K_IMG_RED() )
{
oBody.className = 'cssRed' ;
}
else if( p_iImg == K_IMG_BLUE() )
{
oBody.className = 'cssBlue' ;
}
else
{
oBody.className = 'cssNormal' ;
}
}
catch(e)
{
throw window.name + '::updateHTML([' + p_iImg + ']):\n{\n' + e +
'\n}' ;
}
}
</script>
<style>
..cssNormal
{
background-color: #FFFFFF ;
}

..cssRed
{
background-color: #FF0000 ;
}

..cssBlue
{
background-color: #0000FF ;
}
</style>
</head>
<body id="ID_Body" class="cssNormal">

<a href="javascript: updateHTML(0)">updateHTML(0)</a><br>
<a href="javascript: updateHTML(1)">updateHTML(1)</a><br>
<a href="javascript: updateHTML(2)">updateHTML(2)</a><br>

</body>
</html>

--
 
R

Raoul Borges

Thanks, M. Honnen and Kaeli, for your answers.
The correction of the CSS mistake made it work!
That is not CSS you need
background-color: #FFFFF;
Click to expand...

But there remains one curiosity:

I tried again playing with Venkman, and I found that, with the same page,
with the CSS correction, when debugging step by step Venkman continues
to enter in the last "else" block, as show in the Venkman log below:

The line:

021: else if( p_iImg == K_IMG_BLUE() )

is "true", and as such, we enter the block:

023: oBody.className = 'cssBlue' ;

and then, instead of quiting the function, we continue to

027: oBody.className = 'cssNormal' ;

which can be quite confusing, as this instruction IS NOT executed
(as show by the deep blue screen of the example).

(Going through the source in debug, step by step, led me to think
something was wrong with my if/else instead of searching elsewhere)


Ok, anyway, thanks again!


-- Raoul Borges
To email me, remove the Xs from my email adress


===============================================

Stopped for breakpoint.

#0: function updateHTML(p_iImg=integer:2) in <file:/C:/hvs/__divers/test_mozilla/test_if_else/test_if_else.html> line 13

011: function updateHTML(p_iImg)

012: {

013: try

014: {

015: var oBody = document.getElementById('ID_Body') ;

Continuing from breakpoint.

#0: function updateHTML(p_iImg=integer:2) in <file:/C:/hvs/__divers/test_mozilla/test_if_else/test_if_else.html> line 15

015: var oBody = document.getElementById('ID_Body') ;

#0: function updateHTML(p_iImg=integer:2) in <file:/C:/hvs/__divers/test_mozilla/test_if_else/test_if_else.html> line 17

017: if( p_iImg == K_IMG_RED() )

#0: function updateHTML(p_iImg=integer:2) in <file:/C:/hvs/__divers/test_mozilla/test_if_else/test_if_else.html> line 21

021: else if( p_iImg == K_IMG_BLUE() )

#0: function updateHTML(p_iImg=integer:2) in <file:/C:/hvs/__divers/test_mozilla/test_if_else/test_if_else.html> line 23

023: oBody.className = 'cssBlue' ;

#0: function updateHTML(p_iImg=integer:2) in <file:/C:/hvs/__divers/test_mozilla/test_if_else/test_if_else.html> line 27

027: oBody.className = 'cssNormal' ;

#0: function (null)() in <javascript: updateHTML(2)> line 1

===============================================
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
news:comp.lang.javascript said:
I have a simple IF/ELSE IF/ELSE block, and it won't work as I hoped:

K_IMG_RED(), K_IMG_BLUE() are function that returns either 1 or 2
(the numbers). I use them as constants.

if( p_iImg == K_IMG_RED() ) /* LINE 0*/
{
oBody.className = 'cssRed' ; /* LINE 1*/
}
else if( p_iImg == K_IMG_BLUE() ) /* LINE 2*/
{
oBody.className = 'cssBlue' ; /* LINE 3*/
}
else
{
oBody.className = 'cssNormal' ; /* LINE 4*/
}
Click to expand...


If all else fails, you could try

switch(true) {
case p_iImg == K_IMG_RED() : oBody.className = 'cssRed' ; break ;
case p_iImg == K_IMG_BLUE() : oBody.className = 'cssBlue' ; break ;
default : oBody.className = 'cssNormal' ;
}

or

oBody.className =
p_iImg == K_IMG_RED() ? 'cssRed' :
p_iImg == K_IMG_BLUE() ? 'cssBlue' : 'cssNormal' ;

Untested; but should have the same effect IIRC.
 
L

Lasse Reichstein Nielsen

Dr John Stockton said:
If all else fails, you could try

switch(true) {
case p_iImg == K_IMG_RED() : oBody.className = 'cssRed' ; break ;
case p_iImg == K_IMG_BLUE() : oBody.className = 'cssBlue' ; break ;
default : oBody.className = 'cssNormal' ;
}
Click to expand...

That looks like something that can be simplified to:
---
switch(p_iImg) {
case K_IMG_RED() : oBody.className = 'cssRed' ; break ;
case K_IMG_BLUE() : oBody.className = 'cssBlue' ; break ;
default : oBody.className = 'cssNormal' ;
}
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
news:comp.lang.javascript said:
That looks like something that can be simplified to:
---
switch(p_iImg) {
case K_IMG_RED() : oBody.className = 'cssRed' ; break ;
case K_IMG_BLUE() : oBody.className = 'cssBlue' ; break ;
default : oBody.className = 'cssNormal' ;
}
Click to expand...

Could and should; it was modified from something else, which could not.

It might be possible to arrange for the items after "case" to be
unchanging variables
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with my responsive home page 2
Help with code 0
How to position the *tooltip* comment on these buttons? 9
I Need Help with making a function that draws in a canvas using location data. 1
Dropdown menu in a fixed navbar 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Fading effect between play and play-over and pause and pause-over 0

Members online

Total: 27 (members: 2, guests: 25)
Robots: 208

Forum statistics

Threads
473,773
Messages
2,569,594
Members
45,119
Latest member
IrmaNorcro

Latest Threads

Top