User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 422,406 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,870 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 817 | Replies: 3
Reply
•
•
Join Date: Feb 2008
Posts: 7
Reputation: adrumsolo4u is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
adrumsolo4u adrumsolo4u is offline Offline
Newbie Poster

onclick changes other object

  #1  
Mar 1st, 2008
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:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var animElements = document.getElementById("send").getElementsByTagName("p");
  2. for(var i=0; i<animElements.length; i++) {
  3. 	animElements[i].onclick = sizeChange;
  4. 	}

what i want to happen:

Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var animElements = document.getElementById("send").getElementsByTagName("p");
  2. for(var i=0; i<animElements.length; i++) {
  3. 	when element is clicked, other element (recieve) goes to sizeChange
  4. 	}

here is the sizechange function:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. function sizeChange() {
  2. 	if (!this.currentWidth) this.currentWidth = 150;
  3. 	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  4. 	this.onclick = sizeRestore;
  5. 	}
  6. function sizeRestore() {
  7. 	doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  8. 	this.onclick = sizeChange;
  9. 	}

is there a way to do this (without using an html link)?
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Sep 2005
Posts: 689
Reputation: digital-ether has a spectacular aura about digital-ether has a spectacular aura about 
Rep Power: 6
Solved Threads: 41
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Practically a Master Poster

Help Re: onclick changes other object

  #2  
Mar 1st, 2008
•
•
•
•
Originally Posted by adrumsolo4u View Post
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:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var animElements = document.getElementById("send").getElementsByTagName("p");
  2. for(var i=0; i<animElements.length; i++) {
  3. 	animElements[i].onclick = sizeChange;
  4. 	}

what i want to happen:

Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var animElements = document.getElementById("send").getElementsByTagName("p");
  2. for(var i=0; i<animElements.length; i++) {
  3. 	when element is clicked, other element (recieve) goes to sizeChange
  4. 	}

here is the sizechange function:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. function sizeChange() {
  2. 	if (!this.currentWidth) this.currentWidth = 150;
  3. 	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  4. 	this.onclick = sizeRestore;
  5. 	}
  6. function sizeRestore() {
  7. 	doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  8. 	this.onclick = sizeChange;
  9. 	}

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:

Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. function sizeChange(el) {
  2. 	if (!el.currentWidth) el.currentWidth = 150;
  3. 	doWidthChangeMem(el,el.currentWidth,170,10,10,0.333);
  4. 	el.onclick = sizeRestore;
  5. 	}

Now you will have to use:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. 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:

Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. el1.onclick = function() { sizeChange.call(el2); };
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!
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 7
Reputation: adrumsolo4u is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
adrumsolo4u adrumsolo4u is offline Offline
Newbie Poster

Re: onclick changes other object

  #3  
Mar 2nd, 2008
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.
Help with Code Tags
html Syntax (Toggle Plain Text) 
  1. <div id="sender" class="examplediv">
  2. 	<p>Click me!</p>
  3. 	<p>Click me!</p>
  4. </div>
  5. <div id="receiver" class="examplediv">
  6. 	<p>look i expand!</p>
  7. 	<p>look i expand!</p>
  8. </div>

and here is the javascript:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var sender = document.getElementById("sender").getElementsByTagName("p");
  2. var receiver = document.getElementById("receiver").getElementsByTagName("p");
  3. for(var i=0; i<animElements.length; i++) {
  4. 	sender[i].onclick = sizeChange() { sizeChange.call(reciever[i]); };
  5. 	}
  6. function sizeChange() {
  7. 	if (!this.currentWidth) this.currentWidth = 150;
  8. 	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  9. 	this.onclick = sizeRestore;
  10. 	}
  11. function sizeRestore() {
  12. 	doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  13. 	this.onclick = sizeChange;
  14. 	}

this did not work, so then i tried it withoput any editing, copying and pasting your code:
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var el1 = document.getElementById("sender").getElementsByTagName("p");
  2. var el2 = document.getElementById("receiver").getElementsByTagName("p");
  3. el1.onclick = function() { sizeChange.call(el2); };
  4. function sizeChange() {
  5. 	if (!this.currentWidth) this.currentWidth = 150;
  6. 	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  7. 	this.onclick = sizeRestore;
  8. 	}
  9. function sizeRestore() {
  10. 	doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  11. 	this.onclick = sizeChange;
  12. 	}

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.
Reply With Quote  
•
•
Join Date: Sep 2005
Posts: 689
Reputation: digital-ether has a spectacular aura about digital-ether has a spectacular aura about 
Rep Power: 6
Solved Threads: 41
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Practically a Master Poster

Help Re: onclick changes other object

  #4  
Mar 2nd, 2008
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. var sender = document.getElementById("sender").getElementsByTagName("p");
  2. var receiver = document.getElementById("receiver").getElementsByTagName("p");
  3. for(var i=0; i<sender.length; i++) {
  4. 	sender[i].onclick = function() { sizeChange.call(reciever[i]); };
  5. 	}
  6. function sizeChange() {
  7. 	if (!this.currentWidth) this.currentWidth = 150;
  8. 	doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
  9. 	this.onclick = sizeRestore;
  10. 	}
  11. function sizeRestore() {
  12. 	doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
  13. 	this.onclick = sizeChange;
  14. 	}

this is closer to what you want.

that change I made was:

Help with Code Tags 
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].

Help with Code Tags 
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.

Help with Code Tags 
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!
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
c c++ development object oriented planning programming
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 9:17 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC