onclick with more than 1 function called.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

onclick with more than 1 function called.

Post by aravona »

Im working with a wordpress plugin which is called xcollapse (collapsible elements) which works fine, however it is required to add to this a snipped of code which changes the text of a link as it is clicked.

The code I've found to do this works brilliantly, however I cannot get the two codes to work together and they both need an onClick. I thought of making a function to do both, however I've hit a snag as the xcollapse uses an ID to show which element is to be collapsed.

The change text code:
[text]oldTextAry = new Array();

function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
}
[/text]

Code for the xcollapse:
[text][function xcollapse(id)
{
var ccommid = document.getElementById(id);
if(ccommid !== null) {
if(ccommid.style.display == 'block') {
ccommid.style.display = 'none';
}
else { ccommid.style.display = 'block';
}
}
}[/text]

The link I need it to go in:

<a onclick="xcollapse('X1492');return false; changeText(this,'+ E-BOOKS, DVDs, CDs & DOWNLOADS (Click to hide)');" style="font-size:12px; padding-left:8px; padding-top:9px; background-color:#897c67; color:#FFFFFF; display:block; height:25px;" href="#" id="text1link">+ E-BOOKS, DVDs, CDs & DOWNLOADS (Click to expand)</a>

(red is the change text, blue is the collapse)

Any hints on getting the two to work together? :)

Kind regards,

Aravona
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: onclick with more than 1 function called.

Post by PHPHorizons »

Hello aravona,

It sounds like you need to make a wrapper function. In the onlclick attribute, call that wrapper function as follows:

Code: Select all

onclick="aWrapperFunction(this)"
Then, somwhere on the page in your javascript add a function like this:

Code: Select all

function aWrapperFunction(event_context) {
   // event_context === this
   // call the two functions that you need to call here
   ....
}
Cheers
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: onclick with more than 1 function called.

Post by John Cartwright »

I would probably create a wrapper function, however, it is not neccesary.

In your code,

Code: Select all

<a onclick="xcollapse('X1492');return false; changeText(this,'+ E-BOOKS, DVDs, CDs & DOWNLOADS (Click to hide)');" 
the event is terminated once it reaches the return, which cancels the bubble. Therefore, by simply moving the return statement after both functions, it should work as expected.

Code: Select all

<a onclick="xcollapse('X1492'); changeText(this,'+ E-BOOKS, DVDs, CDs & DOWNLOADS (Click to hide)'); return false;" 
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: onclick with more than 1 function called.

Post by aravona »

Thanks, that does let the code run ^^ however its not changing back anymore ...
Post Reply