Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Calling a function twice in "onclick"

    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:
    Code:
    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:
    Code:
            <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>

  • #2
    Regular Coder
    Join Date
    Apr 2009
    Posts
    244
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Try using the Return statement in your functions

    Mike

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Apr 2009
    Posts
    244
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ok, I updated the functions to:

    Code:
    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.

  • #6
    New Coder
    Join Date
    Oct 2008
    Location
    Turkey
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #7
    Regular Coder
    Join Date
    Apr 2009
    Posts
    244
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <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>

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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:

    Code:
    ...
    <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.

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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?

  • #11
    Regular Coder
    Join Date
    Apr 2009
    Posts
    244
    Thanks
    1
    Thanked 20 Times in 20 Posts
    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

  • #12
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #13
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <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 ...

  • #15
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •