var sender = document.getElementById("sender").getElementsByTagName("p");
var receiver = document.getElementById("receiver").getElementsByTagName("p");
for(var i=0; i<sender.length; i++) {
sender[i].onclick = function() { sizeChange.call(reciever[i]); };
}
function sizeChange() {
if (!this.currentWidth) this.currentWidth = 150;
doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
this.onclick = sizeRestore;
}
function sizeRestore() {
doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
this.onclick = sizeChange;
}
this is closer to what you want.
that change I made was:
for(var i=0; i<sender.length; i++) {
sender[i].onclick = function() { sizeChange.call(reciever[i]); };
}
Now the only thing you have to do, is make sure reciever[i] is available when sender[i].onclick is triggered. As it is, i will be equal to sender.length when any of the sender[i].onclick s triggered. (your loop would have completed when i = sender.length)
Making sure reciever[i] is availalbe requires that you either 'persist' it using a javascript closure, or you can save a reference to reciever[i] somewhere where you can access it when the onclick event occurs.
It depends on which you are comfortable with.
Using a reference: here we save a reference to reciever[i] to the actual htmlElement sender[i].
for(var i=0; i<sender.length; i++) {
sender[i]._receiver = reciever[i];
sender[i].onclick = function() { sizeChange.call(this._receiver); };
}
some ppl prefer a closure.
for(var i=0; i<sender.length; i++) {
sender[i]._receiver = reciever[i];
sender[i].onclick = function() {
var _receiver = reciever[i];
return function() { sizeChange.call(_receiver); };
}(reciever[i]);
}
this is a bit more advanced method of persisting object references or scope in javascript. You can search google for "javascript closure" or "javascript curry" on the topic.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
