Why does this work? [Archive]

Graeme Hackston

08-10-2002, 10:55 PM

I'm trying to determine which of 3 divisions is the tallest. While it appears to be working I don't understand why.

In the page below div "b" and "c" are the tallest but are also the same height. Why does the function return a value? Shouldn't it be undefined?

<html>
<head>
<title></title>
<style>
#a, #b, #c {
border: solid 1px;
}
</style>
<script>
function TallestBox() {
var a = document.getElementById('a').offsetHeight;
var b = document.getElementById('b').offsetHeight;
var c = document.getElementById('c').offsetHeight;
if (((a) == (b)) && ((b) == (c))) {
return a;
return null;
}
if ((a) > (b) && (c)) {
return a;
return null;
}
if ((b) > (a) && (c)) {
return b;
return null;
}
if ((c) > (a) && (b)) {
return c;
return null;
}
}

onload = function() {
alert(TallestBox())
}
</script>
</head>
<body>
<div id="a">
content<br>
content
</div>
<div id="b">
content<br>
content<br>
content
</div>
<div id="c">
content<br>
content<br>
content
</div>
</body>
</html>

adios

08-10-2002, 10:59 PM

Hi Graeme :)

Two return statements in one block. The second never gets reached; it's bad logic as well.

Remember: null is not the same as undefined. Two different concepts.

adios

Graeme Hackston

08-11-2002, 12:17 AM

Thank you sir.

I think I can get the logic if you mean the holes in it. What do I need to do to return the value?

joh6nn

08-11-2002, 04:21 AM

to return a value, all you have to do is return value. that will automatically end the function and return flow to the next command after the function call.

the logic problem that i see is here:

if ((a) > (b) && (c)) {

now, in javascript, you can say if (somevalue) {, and if somevalue is true, then you're block of code will be executed. also, the order of operations, is not always what you might expect, and it's almost never what makes things easiest. to the javascript interpreter, your if statements, look like this ( i think ):

if ( (a > b) && c ) {

so, it will execute if c exists (or isn't false), and a is greater than b. what i think you're looking for is

if ( (a > b) && (a > c) ) {

Graeme Hackston

08-11-2002, 01:01 PM

Thank you John.

I'm not sure if I've got the logic right but I'm having fun playing with it. Am I returning the value correctly or just kidding myself again?

function TallestBox() {
var a = document.getElementById('a').offsetHeight;
var b = document.getElementById('b').offsetHeight;
var c = document.getElementById('c').offsetHeight;
if ( ( (a == b) && (b == c) ) || ( (a > b) && (a > c) ) || ( (a >= b) && (a > c) ) || ( (a > b) && (a >= c) ) ) {
return a;
}
if ( ( (b > a) && (b > c) ) || ( (b >= a) && (b > c) ) || ( (b > a) && (b >= c) ) ) {
return b;
}
if ( ( (c > a) && (c > b) ) || ( (c >= a) && (c > b) ) || ( (c > a) && (c >= b) ) ) {
return c;
}
return value;
}

<edit>It’s still illogical if there are 2 boxes of the same height and the third box is shorter. If that were the case 2 of the if statements would be true.

Rather than adding bytes to the function is there a way to say if 2 statements are true then return 1 of them? Or, in the case of 2 statements being true, will it automatically return just 1 of them?</edit>

Graeme Hackston

08-11-2002, 02:32 PM

Would I be better off using Math.max? If so, how would it be used with 3 variables?

mordred

08-11-2002, 03:01 PM

That's a good idea Graeme, it will save you a lot of "bytes".

function TallestBox() {
var a = document.getElementById('a').offsetHeight;
var b = document.getElementById('b').offsetHeight;
var c = document.getElementById('c').offsetHeight;

return Math.max(a, b, c);
}

You can pass as much arguments to the Math.max() function as you want, it will always return the highest value. Math.min() works similarly.

EDIT: Only with ECMAScript v3 compatible browsers, with older ones you can only pass exactly two arguments. If you have to make this script work for oldtimer browsers, you can do

return Math.max(Math.max(a, b), c);

Graeme Hackston

08-11-2002, 03:10 PM

Way better than my previous messes, thank you Mordred.

Graeme Hackston

08-11-2002, 03:17 PM

Thanks for the info Mordred. I’m using the function in a file that only DOM browsers will read (excluding Opera). Are DOM browsers ECMAScript v3 compatible?

joh6nn

08-12-2002, 09:23 AM

yes, they are.

Graeme Hackston

08-12-2002, 11:53 AM

Thank you for all your help guys.