473,396 Members | 2,147 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

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 3600
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Frank Hauptlorenz | last post by:
Hello Out there! I have a DB2 V7.2 Database (Fix11) on Win 2000 Professional. It was before a NT 4 based Domain - now it is a Win 2000 Domain. The database server is a domain member. Now...
4
by: foo | last post by:
"An unhandled exception of type 'System.NullReferenceException' occurred in Project.exe Additional information: Object reference not set to an instance of an object." This worked in ver 6,...
21
by: Willie jan | last post by:
place this behind a button that fills a listbox. as you will see the time is now and then 0 or filled in???????????? by hitting the button. is there a way to determine the real elapsed time? ...
3
by: paul | last post by:
HI! I have being to add the following as part of a function but it just will not work as is but I don't know why, can someone point out why. This opens up a popup window for a popup detection...
4
by: E | last post by:
I am having trouble with setTimeout working on a second call to the setTimeout function from a second page which is an html page. Here is the scenario. I have a web page and onload it calls a...
52
by: Julie | last post by:
I'm supporting an application at work. Below are some code segments that I can't understand how they work. First let me say, I would never code this standard. I'm just really creeped out that it...
9
by: archana | last post by:
Hi all, I want to know about interval of timer. I am using timer in windows service.I head somewhere that when i set interval property of timer while setting interval, restart time of Pc is...
7
by: The Cool Giraffe | last post by:
Please note that i do intend to use a header file. However, i'm not sure if it's really needed or just a convention. Suppose we have the following two files. // Something.h class Something {...
55
by: Zytan | last post by:
I see that static is more restricted in C# than in C++. It appears usable only on classes and methods, and data members, but cannot be created within a method itself. Surely this is possible in...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.