...

View Full Version : Calling a function twice in "onclick"



Styles2304
06-02-2009, 04:15 PM
The DIVs will show and hide if the function is called on only once. However, if the function is called on more than once, the second calling and on fail to work.

Any ideas?

Here is the function itself:

function changeIframeHeight(id)
{
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer") {
top.document.getElementById(id).height = top.document.getElementById(id).Document.body.scrollHeight;
} else {
top.document.getElementById(id).height = top.document.getElementById(id).contentDocument.body.offsetHeight;
}
}

function toggleDisplay(action, elID, iframeID)
{
var obj = document.getElementById(elID);
if (action == 'hide') {
obj.style.display = 'none';
} else {
obj.style.display = 'block';
}
changeIframeHeight(iframeID);
}


Here is the code that is calling on the function:

<input type="radio" name="Mil_Status" value="ETS" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');"> ETS/Retired <br>
<input type="radio" name="Mil_Status" value="Resigned" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');"> Resigned <br>
<input type="radio" name="Mil_Status" value="Discharged" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');"> Discharged <br>
PROBLEM HERE ------> <input type="radio" name="Mil_Status" value="Serving" onclick="toggleDisplay('hide', 'Mil_FromTo', 'main'); toggleDisplay('show', 'Mil_Serving', 'main');"> Currently Serving <br>

Mike_O
06-02-2009, 04:23 PM
Try using the Return statement in your functions

Mike

Styles2304
06-02-2009, 04:38 PM
I'm not sure how to implement that . . . and it's also worth mentioning that I won't always be calling the function twice. Will that matter?

Mike_O
06-02-2009, 04:56 PM
At the end of both of your functions, just write "Return;". This causes a function to stop executing, and the code that called it to continue past it. Having said that, it won't matter whether you call it once or multiple times.

Mike

Styles2304
06-02-2009, 05:04 PM
Ok, I updated the functions to:



function changeIframeHeight(id)
{
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer") {
top.document.getElementById(id).height = top.document.getElementById(id).Document.body.scrollHeight;
} else {
top.document.getElementById(id).height = top.document.getElementById(id).contentDocument.body.offsetHeight;
}
Return;
}

function toggleDisplay(action, elID, iframeID)
{
var obj = document.getElementById(elID);
if (action == 'hide') {
obj.style.display = 'none';
} else {
obj.style.display = 'block';
}
changeIframeHeight(iframeID);
Return;
}

No Change in action.

nightwolfcem
06-02-2009, 05:27 PM
onclick="toggleDisplay('hide', 'Mil_FromTo', 'main'); toggleDisplay('show', 'Mil_Serving', 'main'); //only work show at every time
-----------------



function toggleDisplay( elID, iframeID)
{
var obj = document.getElementById(elID);
if (obj.style != 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
changeIframeHeight(iframeID);
Return;
}
onclick="toggleDisplay( 'Mil_FromTo', 'main'); try this

Mike_O
06-02-2009, 05:30 PM
Sounds like you might be referencing some non-existant objects within your JS code. Check that whatever ID's you're passing into these functions, that your HTML tags have matching ID's. Meanwhile, remove the return statement from both functions to the way it was before, and try putting "Return;" after each function call inside OnClick in your tag like this:

<input type="radio" name="Mil_Status" value="Serving" onclick="toggleDisplay('hide', 'Mil_FromTo', 'main'); return; toggleDisplay('show', 'Mil_Serving', 'main'); return; "> Currently Serving <br>

Mike

adios
06-02-2009, 05:46 PM
<input type="radio" name="Mil_Status" value="ETS" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> ETS/Retired <br>
<input type="radio" name="Mil_Status" value="Resigned" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> Resigned <br>
<input type="radio" name="Mil_Status" value="Discharged" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> Discharged <br>
PROBLEM HERE ------> <input type="radio" name="Mil_Status" value="Serving" onclick="toggleDisplay('hide', 'Mil_FromTo', 'main'); toggleDisplay('show', 'Mil_Serving', 'main');"> Currently Serving <br><br>

Styles2304
06-02-2009, 06:05 PM
Adios: I'm not sure what your post was really about but I copied and pasted it to no avail.

nightwolfcem: The function I wrote works fine and I need to be able to define whether or not it will be shown/hidden.

Mike_O: Here's what I've got:


...
<td width="122">
<input type="radio" name="Mil_Status" value="ETS" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> ETS/Retired <br>
<input type="radio" name="Mil_Status" value="Resigned" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> Resigned <br>
<input type="radio" name="Mil_Status" value="Discharged" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> Discharged <br>
<input type="radio" name="Mil_Status" value="Serving" onclick="toggleDisplay('hide', 'Mil_FromTo', 'main'); toggleDisplay('show', 'Mil_Serving', 'main');"> Currently Serving <br><br>
</td>
</tr>

<tr>
<td width="100%" colspan="3">
*
</td>
</tr>


<tr>
<td width="100%" colspan="3">
<div id="Mil_FromTo" style="display: none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="152" valign="top" align="right">
<h4>Served From:</h4>
</td>

<td width="15">
</td>

<td width="*" align="left" valign="top">
<input type="text" size="2" value="mm" name="Mil_Month_From" maxlength="2" class="greyed" onfocus="formFocus(this)" onblur="formBlur(this)"> - <input type="text" size="4" value="yyyy" name="Mil_Year_From" maxlength="4" class="greyed" onfocus="formFocus(this)" onblur="formBlur(this)">
* * To: * *
<input type="text" size="2" value="mm" name="Mil_Month_To" maxlength="2" class="greyed" onfocus="formFocus(this)" onblur="formBlur(this)"> - <input type="text" size="4" value="yyyy" name="Mil_Year_To" maxlength="4" class="greyed" onfocus="formFocus(this)" onblur="formBlur(this)">
<br> <br>
</td>
</tr>
</table>
</div>

<div id="Mil_Serving" style="display: none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="152" valign="top" align="right">
<h4>Serving Since:</h4>
</td>

<td width="15">
</td>

<td width="*" align="left" valign="top">
<input type="text" size="2" value="mm" name="Mil_Month_Serving" maxlength="2" class="greyed" onfocus="formFocus(this)" onblur="formBlur(this)"> - <input type="text" size="4" value="yyyy" name="Mil_Year_Serving" maxlength="4" class="greyed" onfocus="formFocus(this)" onblur="formBlur(this)">
</td>
</tr>
</table>
</div>
...

As you can see, the id's match up (unless I'm missing something). I also tried what you suggested with moving the Return; again, to no avail.

adios
06-02-2009, 06:22 PM
Nothing to do with 'return' statements.

Your problem is: you keep implying that something 'isn't working' - but you won't say what it is.


if the function is called on more than once, the second calling and on fail to work.


... is not a description, it's an attempt to explain what's wrong. 'The element doesn't appear' would, as an example, be a description of what is wrong, and might lead to an answer. The two possibilities ('Mil_FromTo', 'Mil_Serving') are toggling properly. What are you seeing?

Mike_O
06-02-2009, 06:25 PM
Hey Styles2304,

I don't see any tag named "main", as it's being referenced inside your "Onclick".

For debugging purposes, I'd start by commenting out all the code within
your functions, then piece by piece, start uncommenting it back. Using this practice, I'm sure you'll get much closer to the source of the problem. For example, inside your "toggleDisplay(...)" function, I commented out the call to "changeIframeHeight(...);", and it looks like whatever the issue is, it's limited to that function which I commented out. Also, as Adios mentioned, perhaps Return statement is not the issue here after all.

Mike

Styles2304
06-02-2009, 06:26 PM
It is a description if you couple it with the code submitted. If the second call of the function calls for the div to be hidden, the div is not hidden, if the second call of the function calls for the div to be shown, the div is not shown. The problem is the function will not actually "function" after it is initially called on.

No need to be rude about it or attempt to make me feel stupid because you don't understand the point I'm attempting to get across.

With that said, they do not appear to be toggling properly at all.

Styles2304
06-02-2009, 06:28 PM
the "main" is actually the iframe that all of this is taking place in. That part of the code functions perfectly . . . it simply stretches or shrinks the iframe to match the content length.

I'll work on that and get back to you in a few minutes.

adios
06-02-2009, 06:33 PM
<html>
<head>
<script>
function changeIframeHeight(id)
{
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer") {
top.document.getElementById(id).height = top.document.getElementById(id).Document.body.scrollHeight;
} else {
top.document.getElementById(id).height = top.document.getElementById(id).contentDocument.body.offsetHeight;
}
}

function toggleDisplay(action, elID, iframeID)
{
var obj = document.getElementById(elID);
if (action == 'hide') {
obj.style.display = 'none';
} else {
obj.style.display = 'block';
}
//changeIframeHeight(iframeID);
}
</script>
</head>
<body>
<form>
<input type="radio" name="Mil_Status" value="ETS" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> ETS/Retired <br>
<input type="radio" name="Mil_Status" value="Resigned" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> Resigned <br>
<input type="radio" name="Mil_Status" value="Discharged" onclick="toggleDisplay('show', 'Mil_FromTo', 'main');toggleDisplay('hide', 'Mil_Serving', 'main')"> Discharged <br>
<input type="radio" name="Mil_Status" value="Serving" onclick="toggleDisplay('hide', 'Mil_FromTo', 'main'); toggleDisplay('show', 'Mil_Serving', 'main');"> Currently Serving <br><br>
<div id="Mil_FromTo" style="display:none;">Mil_FromTo</div>
<div id="Mil_Serving" style="display:none;">Mil_Serving</div>
</form>
</body>
</html>

Simplified version. What isn't working?


No need to be rude about it or attempt to make me feel stupid because you don't understand the point I'm attempting to get across.Gee, now I feel stupid ...

Styles2304
06-02-2009, 07:06 PM
Ok, I tried what mike was suggesting. If I take away the call to changeIframeHeight it toggles the divs just fine. Any idea why calling on the changeIframeHeight more than once causes problems? Should I rig something up so it only fires that function at the very end and only one time?

Mike_O
06-02-2009, 07:49 PM
Hey,

I really don't see any issues with calling the same function multiple times. I say you should continue further debugging this function now that you know more closely where the problem lies.

From what I see, where you say
"top.document.getElementById(id).height"
instead put
"top.document.getElementById(id).style.height"

This should work at least for your "Microsoft Internet Explorer" condition. For other browsers, it might be a little different syntax. I think you have to add "px" to the height value, or somehting like that.

Mike



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum