onclick function

**coolhandluke** · 03-04-2012, 04:14 PM

Have some random image code that work well and as it should. Though I need to add onclick feature that will take you to the back side of the random image being generated.
[code]
var lastIndex = -1;

var image5 = [
"img/cardz/Acceptance-front.jpg",
"img/cardz/simplicity-front.jpg",
"img/cardz/awe-front.jpg",
"img/cardz/caring-front.jpg",
"img/cardz/steadfastness-front.jpg",
"img/cardz/stregnth-front.jpg",
"img/cardz/thoughtfulness-front.jpg",
"img/cardz/trust-front.jpg",
"img/cardz/understanding-front.jpg",
"img/cardz/unity-front.jpg",
"img/cardz/fidelity-front.jpg",
"img/cardz/generosity-front.jpg",
"img/cardz/gentleness-front.jpg",
"img/cardz/humanity-front.jpg",
"img/cardz/hope-front.jpg",
"img/cardz/initiative-front.jpg",
"img/cardz/joyfulness-front.jpg",
"img/cardz/kindness-front.jpg",
"img/cardz/love-front.jpg",
"img/cardz/loyalty-front.jpg",
"img/cardz/clenliness-front.jpg",
"img/cardz/confidence-front.jpg",
"img/cardz/cooperation-front.jpg" ,
"img/cardz/creativity-front.jpg",
"img/cardz/determination-front.jpg",
"img/cardz/devotion-front.jpg",
"img/cardz/enthusiasm-front.jpg",
"img/cardz/faithfullness-front.jpg",
"img/cardz/friendliness-front.jpg",
"img/cardz/helpfulness-front.jpg",
"img/cardz/cooperation-front.jpg",
"img/cardz/flexibility-front.jpg",
"img/cardz/kindness-front.jpg",
"img/cardz/mercy-front.jpg",
"img/cardz/modesty-front.jpg",
"img/cardz/serenity-front.jpg",
"img/cardz/resilience-front.jpg",
"img/cardz/modesty-front.jpg",
"img/cardz/openess-front.jpg",
"img/cardz/orderliness-front.jpg",
"img/cardz/perceptiveness-front.jpg",
"img/cardz/righteousness-front.jpg",
"img/cardz/trustworthiniess-front.jpg",
"img/cardz/tolerance-front.jpg",
"img/cardz/optimism-front.jpg",
"img/cardz/excellence-front.jpg",
"img/cardz/decisiveness-front.jpg",
"img/cardz/courtesy-front.jpg",
"img/cardz/faith-front.jpg",
"img/cardz/joyfulness-front.jpg",
"img/cardz/steadfastness-front.jpg",
"img/cardz/contentment-front.jpg",
"img/cardz/idealism-front.jpg",
"img/cardz/initiative-front.jpg",
"img/cardz/purity-front.jpg",
"img/cardz/commitment-front.jpg",
"img/cardz/justice-front.jpg",
"img/cardz/nobility-front.jpg",
"img/cardz/openess-front.jpg",
"img/cardz/prayerfulness-front.jpg",
"img/cardz/nobility-front.jpg",

];

function randvirt() {
var currIndex = lastIndex;
while (currIndex == lastIndex) {
currIndex = Math.floor(Math.random() * image5.length);
}
lastIndex = currIndex;
return image5[currIndex];
}

function nextImage2(){
document.getElementById('clickbackz').getElementsByTagName('img')[0].src = image5[( ++lastIndex + image5.length) % image5.length];
}
function prevImage2(){
document.getElementById('clickbackz').getElementsByTagName('img')[0].src = image5[( --lastIndex + image5.length) % image5.length];
}

views.cardsStart = function(viewName, viewConfig, callback) {
var self = this;
var view = new View();
view.title = "Virtue Cards";
var contents = [];
contents.push(
new joContainer ([

new joCaption("<div id='clickbackz' class='left'><img width='330' height='367' src='" +randvirt() + "' border='0' /><a href='#' id='prevImageButton7'><img class='prev' src='img/buttons/spacer2.gif' width='60' height='367' border='0'/></a><a href='#' id='nextImageButton7'><img class='next' src='img/buttons/spacer2.gif' width='1' height='1' border='0'/></a></div>")

])
);

stateManager.userAccessedUpliftingContent();
view.contents = new joCard(contents);
view.name = viewName;
view.config = viewConfig;
callback.call(this, null, view);

// calling the next and prev buttons
document.getElementById ('nextImageButton7').onclick = function() {
nextImage2();
return false;
};

document.getElementById ('prevImageButton7').onclick = function () {
prevImage2();
return false;
};

};
[code]

**xelawho** · 03-04-2012, 06:42 PM

untested, but something like this may work if you name the card backs the same but with "back" instead of "front"...

Code:

function flipImage(){
	thepic=document.getElementById('clickbackz').getElementsByTagName('img')[0]
thepic.src=thepic.src.match("front")?thepic.src.replace("front","back"):thepic.src.replace("back","front");
}