469,271 Members | 1,014 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

Why does my function only work once?

I'm writing a javascript function that is supposed to open and close a box
by adjusting the height style of a div container, everytime the link is
clicked. For some reason though, the function only works once--I click and
it opens, and then I click again and it closes--then it never does it again.
Why doesn't it do it again? I plan to have multiple div containers on the
page that do the same thing, but for some reason they stop after the first
close. Help would be appreciated--thanks.
----------------------------------------------------------------------------
-------
<html>
<head>
<style type="text/css">
body {background:#87A7CA}
a {color:#BFE733}
..script {
width:400px;
height:20px;
border-right:2px solid #233949;
border-bottom:2px solid #233949;
margin-bottom:5px;
background:#3B607C;
font:12px arial;
color:#7BB4DF;
overflow:hidden
}
</style>
<script type="text/javascript">
function opener(box,heightto) {
var boxheight = document.getElementById(box)
if (boxheight.style.height < heightto) {
boxheight.style.height = heightto;
}
else {
boxheight.style.height = "20px";
}
}
</script>
</head>
<body>
<div id="blah" class="script"><a href="#"
onClick="opener('blah','200px')">Open/Close</a><br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT</div>
</body>
</html>
Jul 20 '05 #1
5 3304
Lee
TheKeith said:

I'm writing a javascript function that is supposed to open and close a box
by adjusting the height style of a div container, everytime the link is
clicked. For some reason though, the function only works once--I click and
it opens, and then I click again and it closes--then it never does it again.
Why doesn't it do it again? I plan to have multiple div containers on the
page that do the same thing, but for some reason they stop after the first
close. Help would be appreciated--thanks.
Because "200px" is less than "20px".
Strings are compared in lexical order.

Since the style.height attribute won't have any value before
the first time you set it, the easiest fix would seem to be
to check to see if style.height=="200px". If it does, set it
to "20px", else set it to "200px". Less general, but an easy
fix.

Also, it's a bad idea to name a function "opener".
It clobbers the window.opener attribute.

----------------------------------------------------------------------------
-------
<html>
<head>
<style type="text/css">
body {background:#87A7CA}
a {color:#BFE733}
.script {
width:400px;
height:20px;
border-right:2px solid #233949;
border-bottom:2px solid #233949;
margin-bottom:5px;
background:#3B607C;
font:12px arial;
color:#7BB4DF;
overflow:hidden
}
</style>
<script type="text/javascript">
function opener(box,heightto) {
var boxheight = document.getElementById(box)
if (boxheight.style.height < heightto) {
boxheight.style.height = heightto;
}
else {
boxheight.style.height = "20px";
}
}
</script>
</head>
<body>
<div id="blah" class="script"><a href="#"
onClick="opener('blah','200px')">Open/Close</a><br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT</div>
</body>
</html>


Jul 20 '05 #2

"Lee" <RE**************@cox.net> wrote in message
news:bn*********@drn.newsguy.com...
TheKeith said:

I'm writing a javascript function that is supposed to open and close a boxby adjusting the height style of a div container, everytime the link is
clicked. For some reason though, the function only works once--I click andit opens, and then I click again and it closes--then it never does it again.Why doesn't it do it again? I plan to have multiple div containers on the
page that do the same thing, but for some reason they stop after the firstclose. Help would be appreciated--thanks.


Because "200px" is less than "20px".
Strings are compared in lexical order.

Since the style.height attribute won't have any value before
the first time you set it, the easiest fix would seem to be
to check to see if style.height=="200px". If it does, set it
to "20px", else set it to "200px". Less general, but an easy
fix.

Also, it's a bad idea to name a function "opener".
It clobbers the window.opener attribute.

Hey thanks a lot! I feel like an idiot--I should have seen that.
Jul 20 '05 #3
"Lee" <RE**************@cox.net> wrote in message
news:bn*********@drn.newsguy.com...
TheKeith said:

I'm writing a javascript function that is supposed to open and close a boxby adjusting the height style of a div container, everytime the link is
clicked. For some reason though, the function only works once--I click andit opens, and then I click again and it closes--then it never does it again.Why doesn't it do it again? I plan to have multiple div containers on the
page that do the same thing, but for some reason they stop after the firstclose. Help would be appreciated--thanks.


Because "200px" is less than "20px".
Strings are compared in lexical order.

Since the style.height attribute won't have any value before
the first time you set it, the easiest fix would seem to be
to check to see if style.height=="200px". If it does, set it
to "20px", else set it to "200px". Less general, but an easy
fix.

Also, it's a bad idea to name a function "opener".
It clobbers the window.opener attribute.

Doing it your way worked, but since I'm learning js, I'm experimenting so
please bare with me if you can. I changed it to the following and noticed
another problem:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background:#87A7CA}
a {color:#BFE733}
..script {
width:400px;
height:20px;
border-right:2px solid #233949;
border-bottom:2px solid #233949;
margin-bottom:5px;
background:#3B607C;
font:12px arial;
color:#7BB4DF;
overflow:hidden
}
</style>
<script type="text/javascript">
function open_close(box,heightto) {
var idofbox = document.getElementById(box);
var boxheightnum = parseInt(idofbox.style.height);

if (boxheightnum < heightto) {
idofbox.style.height = heightto + "px";
}
else {
idofbox.style.height = "20px";
}
}
</script>
</head>
<body>
<div id="blah" class="script"><a href="#"
onClick="open_close('blah',200)">Date display</a><br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT<br>
<br>
CONTENT</div>
</body>
</html>

In this instance, I have to click the link twice before it "opens" the box.
Unless I'm wrong, I figured out that this has something to do with the fact
that I set my styles in a sheet isntead of inline; I set the styles inline
and didn't have the same problem. Because of the stylesheet in the header, I
believe the function needs the first click to read the styles and the second
click to actually change the box's height. Is this accurate? Is there anyway
I can modify it to do everything in one action? Thanks.
Jul 20 '05 #4
Unless I'm wrong, I figured out that this has something to do with the fact
that I set my styles in a sheet isntead of inline; I set the styles inline
and didn't have the same problem. Because of the stylesheet in the header, I believe the function needs the first click to read the styles and the second click to actually change the box's height. Is this accurate? Is there anyway I can modify it to do everything in one action? Thanks.

Actually scratch that. It's not right. Something else in my version is
requiring that I click the link twice to start the function working. What is
it--I don't know?
Jul 20 '05 #5

"TheKeith" <no@spam.com> wrote in message
news:Io********************@giganews.com...
Unless I'm wrong, I figured out that this has something to do with the fact
that I set my styles in a sheet isntead of inline; I set the styles inline and didn't have the same problem. Because of the stylesheet in the

header, I
believe the function needs the first click to read the styles and the second
click to actually change the box's height. Is this accurate? Is there

anyway
I can modify it to do everything in one action? Thanks.

Actually scratch that. It's not right. Something else in my version is
requiring that I click the link twice to start the function working. What

is it--I don't know?

No actually I was right. It is the stylesheet. JS can't read styles from a
stylesheet, and so the initial height value was hidden from the script. I
see what you mean now, Lee.
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

21 posts views Thread by Willie jan | last post: by
4 posts views Thread by E | last post: by
52 posts views Thread by Julie | last post: by
7 posts views Thread by The Cool Giraffe | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.