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 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

    can you change an elements onclick attribute?

    like, if i've got a toggle, but want "on" and "off" to call seperate functions... i realize there is probably a way i could condense them into one function, but i haven't figured out how yet. and at any rate, if what i ask about is possible, it could be handy..

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Something like this ought to do it:

    Code:
    <input type="checkbox" onclick="this.checked?trueFunction():falseFunction()" />

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    merci, monsieur!

    out of curiosity, is the value of the attribute accessible via the DOM at all? i searched, but came up with nothing on that.

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what if i wanted to apply a similar idea to an element that doesn't inherently contain a boolean like "checked" to compare against... such as an <a>?

    Code:
    <a href="#" title="Hide the sidebar." id="sidebarButton" onclick="this.title.substring(0,4)='Hide'?return sidebarOff():return sidebarOn()">&laquo; hide sidebar</a>
    I tried that, but it reports a syntax error with that statement. After the sidebarOff() is run, it switches the title to "Show the sidebar." The idea then is that it would return the sidebarOn function in that case. But apparently, that avenue of approach is impassible?

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    You could do it from a link but it gets complicated enough that I would think looking into combing your two separate functions into one is a better option.

    If you post the two functions we can show you how to do it.

    In any case here is how you can do it with the link:

    Code:
    <a href="#" title="Hide the sidebar" id="sidebarButton" onclick="if(this.title.substring(0,4)=='Hide'){this.title='Show the sidebar';this.innerHTML='show sidebar &raquo';sidebarOff()}else{this.title='Hide the sidebar';this.innerHTML='&laquo; hide sidebar';sidebarOn()} return false">&laquo; hide sidebar</a>

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, i could use the verbose if syntax and still do the changing of title, innerHTML, etc. through the functions, right? let's see...

    yup, that'll do for now so i can at least see the effect. i'll work on condensing the two functions though, 'cause i know it can be done too. and should be, really.
    Last edited by ]|V|[agnus; 07-03-2004 at 09:08 AM.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please try the following


    <script language="javascript">
    <!--
    var i=0
    function dualButt(){
    i++
    if (i==1){
    one()
    document.getElementById("lnk").innerHTML="Turn OFF"
    }
    else
    if (i==2){
    two()
    document.getElementById("lnk").innerHTML="Turn ON"
    i=0
    }

    }

    function one(){
    alert('This is would be the first function')
    }

    function two(){
    alert('This is would be the second function')
    }
    // -->
    </script>

    <a id="lnk" href="#null" onclick="dualButt()">Turn ON</a>
    Last edited by Mr J; 07-03-2004 at 07:11 PM.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    I still think the most efficient way to do this would be to combine the two functions. Magnus should post the two functions so we can show him how.

  • #9
    New Coder
    Join Date
    Jun 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Just An Idea

    Since it look like you are really needing to rotate the state of the sidebar, You can use a simple check of the sidebar's CSS style state. You can use either the "display" or "visibility" status.


    The trick is to have two evalusation statement run one after the other using the desidered event.
    The first evaluation statment will rotate the desired attribute.
    The second check has to evaluate then check the attribute after the first event has completed.

    Example
    Create a DIV tag using "display:none" as it's default state
    Code:
    <div id="divSidebar" style="positions: absolute; left:0px; top:0px; width: 50px; height: 50px; display: none;">Some Text</div>
    Using a Span Tag:<br>
    Code:
    <span id="spnRotateSideBar" onclick="document.getElementById('divSidebar').style.display=(document.getElementById('divSidebar').style.display==''?'none':'');document.getElementById('spnRotateSideBar').innerHTML=(document.getElementById('divSidebar').style.display!=''?'Show Sidebar':'Hide SideBar');" title="Click here to Show/Hide the Sidebar">Show Sidebar</span>
    Using an Anchor Link:
    Code:
    <a id="lnkRotateSideBar" href="javascript:;" onclick="document.getElementById('divSidebar').style.display=(document.getElementById('divSidebar').style.display==''?'none':'');document.getElementById('lnkRotateSideBar').innerHTML=(document.getElementById('divSidebar').style.display!=''?'Show Sidebar':'Hide SideBar');" title="Click here to Show/Hide the Sidebar">Show Sidebar</a>
    This is the simplest way I've found to change on objects targeted state w/o writing separate functions.

    MindCrafter
    www.mindcrafter.com
    Last edited by MindCrafter; 07-04-2004 at 04:01 AM. Reason: typoed anchor link code...

  • #10
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    can you change an elements onclick attribute?

    This was your original question, in your title.
    So just incase this can still help.
    yourElement.setAttribute("onclick","yourFunction()");

    so
    <a onmouseover="this.setAttribute('onclick','alert(\'new onclick attribute\');');" onclick="alert('old onclick attribute');">hover, then click</a>

    something like that.
    Shawn


  •  

    Posting Permissions

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