Help JS Event onclick to get ID

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Nov 2008
Posts: 17
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Help JS Event onclick to get ID

 
0
  #1
Sep 12th, 2009
im busy with a school project to create a photo viewer type site with java script.

the whole thing i being created from java script and im giving all the img's an ID tag

how do i go about getting the id of the img that i have just clicked.

i know my current code doesn't work properly in IE so help with that would be appreciated as well.

the reason i want the Id is so later i can hopefully use the info to determine which img to "zoom in" etc
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 	function vulpagina()
  2. 	{
  3. 		alert("vulpagina geactiveerd, jej");
  4. 		var maindiv=document.getElementById("maindiv");
  5.  
  6. 		for(i=1; i<26; i++)
  7. 		{
  8. 			var imgnr = i-1
  9. 			var div=document.createElement("div");
  10. 			var img=document.createElement("img");
  11. 			var br=document.createElement("br");
  12. 			var txt=document.createTextNode("dit is div " + i);
  13.  
  14. 			img.src=album[imgnr].url;
  15. 			img.style.margin ="10px 50p";
  16. 			img.style.padding ="10px";
  17. 			img.style.height="80%";
  18.  
  19. 			img.setAttribute('onclick','getImgId(this)');
  20. 			img.onclick = getImgId;
  21.  
  22. 			div.setAttribute("id","divje" + i);
  23. 			div.appendChild(img)
  24. 			div.setAttribute('style','float:left');
  25. 			div.style.width="20%";
  26. 			div.style.height="20%";
  27. 			div.appendChild(txt);
  28.  
  29. 			maindiv.appendChild(div);
  30. 			//alert("test");
  31. 		}
  32. 	}
  33.  
  34. function getImgId(obj)
  35. {
  36. 		alert('test')
  37. 		imgId = event.srcElement.id	
  38. 		alert(imgId)		
  39. }
  40.  
  41.  
  42.     var album =
  43.       [
  44.         {
  45.           url: 'images/0006787.jpg',
  46.           landscape: false,
  47.           description: 'Shadows to the sea...',
  48.           photographer: 'Sander',
  49.           date: new Date('12-8-1999')
  50.         },
  51.         {
  52.           url: 'images/0004713.jpg',
  53.           landscape: false
  54.         },
  55.         {
  56.           url: 'images/0004720.jpg',
  57.           landscape: false
  58.         },
  59.         {
  60.           url: 'images/0004731.jpg',
  61.           landscape: true
  62.         }
  63.       ];
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 17
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Re: Help JS Event onclick to get ID

 
0
  #2
Sep 12th, 2009
hmm is there an edit button?

anyway

i changed my code a bit to using event listeners but i still cant get the Id to appear in the alert i get either HTMLElement or something like that in the alert or i get an empty alert box
anyone know what im doing wrong?.

sorry for double post but i couldnt edit my first one.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 	function vulpagina()
  2. 	{
  3. 		alert("vulpagina geactiveerd, jej");
  4. 		var maindiv=document.getElementById("maindiv");
  5.  
  6. 		for(i=1; i<26; i++)
  7. 		{
  8. 			var imgnr = i-1
  9. 			var div=document.createElement("div");
  10. 			var img=document.createElement("img");
  11. 			var br=document.createElement("br");
  12. 			var txt=document.createTextNode("dit is div " + i);
  13.  
  14. 			img.src=album[imgnr].url;
  15. 			img.style.margin ="10px 50p";
  16. 			img.style.padding ="10px";
  17. 			img.style.height="80%";
  18.  
  19. 			img.addEventListener('click',getImgId, false);
  20.  
  21.  
  22. 			div.setAttribute("id","divje" + i);
  23. 			div.appendChild(img)
  24. 			div.setAttribute('style','float:left');
  25. 			div.style.width="20%";
  26. 			div.style.height="20%";
  27. 			div.appendChild(txt);
  28.  
  29. 			maindiv.appendChild(div);
  30. 			//alert("test");
  31. 		}
  32. 	}
  33.  
  34. function getImgId(e)
  35. {
  36. 		var target = e.target;
  37. 		if (window.event) e = window.event;
  38. 		var srcElement = e.srcElement? e.srcElement : e.target;  
  39. 		alert(srcElement.id)
  40. 		//imgId = event.srcElement.id	
  41. 		//alert(imgId)		
  42. }
Last edited by Sereal_Killer; Sep 12th, 2009 at 7:18 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Help JS Event onclick to get ID

 
1
  #3
Sep 12th, 2009
•
•
•
•
Originally Posted by Sereal_Killer View Post
hmm is there an edit button?

anyway

i changed my code a bit to using event listeners but i still cant get the Id to appear in the alert i get either HTMLElement or something like that in the alert or i get an empty alert box
anyone know what im doing wrong?.

sorry for double post but i couldnt edit my first one.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function vulpagina()	{
  2. 	var maindiv=document.getElementById("maindiv");
  3.  
  4. for(i=0; i<26; i++){
  5. 	var imgnr = i;
  6. var div=document.createElement("div");
  7. var img=document.createElement("img");
  8. var br=document.createElement("br");
  9. var txt=document.createTextNode("dit is div " + i);
  10.  
  11. 	img.src=album[imgnr].url;
  12. 	img.style.margin ="10px";
  13. 	img.style.padding ="10px";
  14. 	img.style.height="80%";
  15. 	img.onclick=getImgId;
  16. 		div.setAttribute("id","divje" + i);
  17. 		div.appendChild(img)
  18. 		div.setAttribute('style','float:left');
  19. 		div.style.width="20%";
  20. 		div.style.height="20%";
  21. 		div.appendChild(br);
  22. 		div.appendChild(txt);
  23. 			maindiv.appendChild(div);
  24. 		}
  25. 	}
  26.  
  27. function getImgId(){ id = this.id; alert( id ) }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Help JS Event onclick to get ID

 
0
  #4
Sep 13th, 2009
Hey junkhead, did you finish school?!!
What grade did you get?
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 17
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Re: Help JS Event onclick to get ID

 
0
  #5
Sep 14th, 2009
no grade yet. its due friday.
this is a chalange for me with onyl 2 weeks of js lessons lol.
anyway thx for the help.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Help JS Event onclick to get ID

 
0
  #6
Sep 14th, 2009
•
•
•
•
Originally Posted by Sereal_Killer View Post
no grade yet. its due friday.
this is a chalange for me with onyl 2 weeks of js lessons lol.
anyway thx for the help.
Good luck than!
But you should have told us that the solution:
.
.
.
img.onclick=getImgId;
.
.
.
function getImgId(){ id = this.id; alert( id ) }
.
.
.
works!
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 17
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Re: Help JS Event onclick to get ID

 
0
  #7
Sep 14th, 2009
it works heh sry about that.
im not actualy using the whole function as it is but i am using it as a stepping stone. ill mark this post solved but i think im gona need more help soon with a few other functions,
thanks again for the help
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxexample ajaxjspservlets api array browser bug captcha captchaformproblem cart checkbox child class close codes cookies createrange() cursor date debugger dependent developer disablefirebug dom dropdown editor element embed engine events explorer ext file firefox form forms getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl maps marquee masterpage math matrixcaptcha media object onerror onmouseoutdivproblem onreadystatechange parent paypal pdf php position post programming progressbar prototype rated redirect runtime safari scale scriptlets scroll search security session shopping size software star stars synchronous toggle tweet unicode variables web webservice wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC