View Full Version : can you change an elements onclick attribute?

07-03-2004, 03:44 AM
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..

07-03-2004, 03:52 AM
Something like this ought to do it:

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

07-03-2004, 04:11 AM
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.

07-03-2004, 04:27 AM
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>?

<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?

07-03-2004, 04:48 AM
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:

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

07-03-2004, 10:05 AM
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.

Mr J
07-03-2004, 01:36 PM
Please try the following

<script language="javascript">
var i=0
function dualButt(){
if (i==1){
document.getElementById("lnk").innerHTML="Turn OFF"
if (i==2){
document.getElementById("lnk").innerHTML="Turn ON"


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

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

<a id="lnk" href="#null" onclick="dualButt()">Turn ON</a>

07-03-2004, 05:40 PM
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.

07-04-2004, 04:58 AM
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.

Create a DIV tag using "display:none" as it's default state

<div id="divSidebar" style="positions: absolute; left:0px; top:0px; width: 50px; height: 50px; display: none;">Some Text</div>

Using a Span Tag:<br>

<span id="spnRotateSideBar" onclick="document.getElementById('divSidebar').style.display=(document.getElementById('divSidebar').style.dis play==''?'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:

<a id="lnkRotateSideBar" href="javascript:;" onclick="document.getElementById('divSidebar').style.display=(document.getElementById('divSidebar').style.dis play==''?'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.


07-05-2004, 06:42 AM
can you change an elements onclick attribute?

This was your original question, in your title.
So just incase this can still help.

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

something like that.