onclick changes other object

[adrumsolo4u]

what i am trying to accomplish is to have two elements lets say SEND and RECEIVE.
when i click the element SEND i want the RECEIVE element to receive the effect.

currently my script only effects the element itself:

var animElements = document.getElementById("send").getElementsByTagName("p");
for(var i=0; i<animElements.length; i++) {
	animElements[i].onclick = sizeChange;
	}

what i want to happen:

var animElements = document.getElementById("send").getElementsByTagName("p");
for(var i=0; i<animElements.length; i++) {
	when element is clicked, other element (recieve) goes to sizeChange
	}

here is the sizechange function:

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

is there a way to do this (without using an html link)?

[digital-ether]

what i am trying to accomplish is to have two elements lets say SEND and RECEIVE.
when i click the element SEND i want the RECEIVE element to receive the effect.

currently my script only effects the element itself:

var animElements = document.getElementById("send").getElementsByTagName("p");
for(var i=0; i<animElements.length; i++) {
	animElements[i].onclick = sizeChange;
	}

what i want to happen:

var animElements = document.getElementById("send").getElementsByTagName("p");
for(var i=0; i<animElements.length; i++) {
	when element is clicked, other element (recieve) goes to sizeChange
	}

here is the sizechange function:

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

is there a way to do this (without using an html link)?

The sizeChange and sizeRestore functions reference the HTML Element calling them via the this keyword. When the onclick event is is triggered, this will refer to the Element on which it is triggered.

The simplest (to understand) thing to do is to change all the this keyword to a variable such as el. And pass the Element you want changed to the function as el.

eg:

function sizeChange(el) {
	if (!el.currentWidth) el.currentWidth = 150;
	doWidthChangeMem(el,el.currentWidth,170,10,10,0.333);
	el.onclick = sizeRestore;
	}

Now you will have to use:

el1.onclick = function() { sizeChange(el2); };

where el1 is the element to be clicked, and el2 is the element to change.

Another way of doing it is to have the function called in the scope of the element to be changed, so that this would refer to the correct element.

eg:

el1.onclick = function() { sizeChange.call(el2); };

[adrumsolo4u]

i tried to implement the second solution you had, but it failed.
i will show you my html and my javascript, in case it might help.

<div id="sender" class="examplediv">
	<p>Click me!</p>
	<p>Click me!</p>
</div>
<div id="receiver" class="examplediv">
	<p>look i expand!</p>
	<p>look i expand!</p>
</div>

and here is the javascript:

var sender = document.getElementById("sender").getElementsByTagName("p");
var receiver = document.getElementById("receiver").getElementsByTagName("p");
for(var i=0; i<animElements.length; i++) {
	sender[i].onclick = sizeChange() { 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 did not work, so then i tried it withoput any editing, copying and pasting your code:

var el1 = document.getElementById("sender").getElementsByTagName("p");
var el2 = document.getElementById("receiver").getElementsByTagName("p");
el1.onclick = function() { sizeChange.call(el2); };
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;
	}

and that didn't work either. i am guessing it has to do with the way your code seems to call to the function, whereas the code that does work, is an identifier.

[digital-ether]

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 is available when sender.onclick is triggered. As it is, i will be equal to sender.length when any of the sender.onclick s triggered. (your loop would have completed when i = sender.length)

Making sure reciever is availalbe requires that you either 'persist' it using a javascript closure, or you can save a reference to reciever 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 to the actual htmlElement sender.

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.