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.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using javascript to hide and display HTML elements

    I have four buttons on a form. Only two of these buttons should appear at any one time. The determination of which two appear is based on a property called PairResolved that I am getting from the controller (asp.net-MVC). I have tested this code with a var of 1 where a =1 and the if statement tested for a=1. All the buttons appeared so I can only guess that there is something wrong with the javascript. Here is the code.
    Code:
        <script type="text/javascript">
            function displaybuttons() {
                if (this.data.PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible'; 
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden'; 
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        </script>
        <div onload="displaybuttons()" >    
            <button type="button" id="unlink">UnLink</button>
            <button type="button" id="resolve">Resolve</button>
            <button type="button" id="unresolve">UnResolve</button>
            <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
        </div>

  • #2
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    FYI - The var was an a and the value of a was 1, not a var of 1.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,551 Times in 4,515 Posts
    <div> does not support onload. So the function is never called.

    Try this:
    Code:
        <div>    
            <button type="button" id="unlink">UnLink</button>
            <button type="button" id="resolve">Resolve</button>
            <button type="button" id="unresolve">UnResolve</button>
            <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
        </div>
        <script type="text/javascript">
        (
            function()
            {
                if (this.data.PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible'; 
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden'; 
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        )();
        </script>
    I hope you realize that this in that context refers to the window object. Is that what you intended?

    Note that the JS code here must be placed *after* the </div> tag. I'd recommend putting it just before the </body> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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