Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1745

Sep 12th, 2009

Help JS Event onclick to get ID

Expand Post »

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)
	function vulpagina()
	{
		alert("vulpagina geactiveerd, jej");
		var maindiv=document.getElementById("maindiv");
 
		for(i=1; i<26; i++)
		{
			var imgnr = i-1
			var div=document.createElement("div");
			var img=document.createElement("img");
			var br=document.createElement("br");
			var txt=document.createTextNode("dit is div " + i);
 
			img.src=album[imgnr].url;
			img.style.margin ="10px 50p";
			img.style.padding ="10px";
			img.style.height="80%";
 
			img.setAttribute('onclick','getImgId(this)');
			img.onclick = getImgId;
 
			div.setAttribute("id","divje" + i);
			div.appendChild(img)
			div.setAttribute('style','float:left');
			div.style.width="20%";
			div.style.height="20%";
			div.appendChild(txt);
 
			maindiv.appendChild(div);
			//alert("test");
		}
	}
 
function getImgId(obj)
{
		alert('test')
		imgId = event.srcElement.id	
		alert(imgId)		
}
 
 
    var album =
      [
        {
          url: 'images/0006787.jpg',
          landscape: false,
          description: 'Shadows to the sea...',
          photographer: 'Sander',
          date: new Date('12-8-1999')
        },
        {
          url: 'images/0004713.jpg',
          landscape: false
        },
        {
          url: 'images/0004720.jpg',
          landscape: false
        },
        {
          url: 'images/0004731.jpg',
          landscape: true
        }
      ];
	function vulpagina()
	{
		alert("vulpagina geactiveerd, jej");
		var maindiv=document.getElementById("maindiv");
		
		for(i=1; i<26; i++)
		{
			var imgnr = i-1
			var div=document.createElement("div");
			var img=document.createElement("img");
			var br=document.createElement("br");
			var txt=document.createTextNode("dit is div " + i);

			img.src=album[imgnr].url;
			img.style.margin ="10px 50p";
			img.style.padding ="10px";
			img.style.height="80%";
			
			img.setAttribute('onclick','getImgId(this)');
			img.onclick = getImgId;

			div.setAttribute("id","divje" + i);
			div.appendChild(img)
			div.setAttribute('style','float:left');
			div.style.width="20%";
			div.style.height="20%";
			div.appendChild(txt);
			
			maindiv.appendChild(div);
			//alert("test");
		}
	}
		
function getImgId(obj)
{
		alert('test')
		imgId = event.srcElement.id	
		alert(imgId)		
}


    var album =
      [
        {
          url: 'images/0006787.jpg',
          landscape: false,
          description: 'Shadows to the sea...',
          photographer: 'Sander',
          date: new Date('12-8-1999')
        },
        {
          url: 'images/0004713.jpg',
          landscape: false
        },
        {
          url: 'images/0004720.jpg',
          landscape: false
        },
        {
          url: 'images/0004731.jpg',
          landscape: true
        }
      ];

Similar Threads

products order in onclick event in PHP
onclick image?? in PHP
problems editing dataGrid and 'Tab' delimited text file in C#
Buttons help!!!! in Pascal and Delphi
addEventListener not adding var in function in JavaScript / DHTML / AJAX

Sereal_Killer

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

17 posts
since Nov 2008

Permalink

Sep 12th, 2009

Re: Help JS Event onclick to get ID

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)
	function vulpagina()
	{
		alert("vulpagina geactiveerd, jej");
		var maindiv=document.getElementById("maindiv");
 
		for(i=1; i<26; i++)
		{
			var imgnr = i-1
			var div=document.createElement("div");
			var img=document.createElement("img");
			var br=document.createElement("br");
			var txt=document.createTextNode("dit is div " + i);
 
			img.src=album[imgnr].url;
			img.style.margin ="10px 50p";
			img.style.padding ="10px";
			img.style.height="80%";
 
			img.addEventListener('click',getImgId, false);
 
 
			div.setAttribute("id","divje" + i);
			div.appendChild(img)
			div.setAttribute('style','float:left');
			div.style.width="20%";
			div.style.height="20%";
			div.appendChild(txt);
 
			maindiv.appendChild(div);
			//alert("test");
		}
	}
 
function getImgId(e)
{
		var target = e.target;
		if (window.event) e = window.event;
		var srcElement = e.srcElement? e.srcElement : e.target;  
		alert(srcElement.id)
		//imgId = event.srcElement.id	
		//alert(imgId)		
}
	function vulpagina()
	{
		alert("vulpagina geactiveerd, jej");
		var maindiv=document.getElementById("maindiv");
		
		for(i=1; i<26; i++)
		{
			var imgnr = i-1
			var div=document.createElement("div");
			var img=document.createElement("img");
			var br=document.createElement("br");
			var txt=document.createTextNode("dit is div " + i);

			img.src=album[imgnr].url;
			img.style.margin ="10px 50p";
			img.style.padding ="10px";
			img.style.height="80%";
			
			img.addEventListener('click',getImgId, false);


			div.setAttribute("id","divje" + i);
			div.appendChild(img)
			div.setAttribute('style','float:left');
			div.style.width="20%";
			div.style.height="20%";
			div.appendChild(txt);
			
			maindiv.appendChild(div);
			//alert("test");
		}
	}
		
function getImgId(e)
{
		var target = e.target;
		if (window.event) e = window.event;
		var srcElement = e.srcElement? e.srcElement : e.target;  
		alert(srcElement.id)
		//imgId = event.srcElement.id	
		//alert(imgId)		
}

Last edited by Sereal_Killer; Sep 12th, 2009 at 7:18 pm.

Sereal_Killer

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

17 posts
since Nov 2008

Permalink

Sep 12th, 2009

Re: Help JS Event onclick to get ID

Click to Expand / Collapse Quote originally posted by Sereal_Killer ...

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)
function vulpagina()	{
	var maindiv=document.getElementById("maindiv");
 
for(i=0; i<26; i++){
	var imgnr = i;
var div=document.createElement("div");
var img=document.createElement("img");
var br=document.createElement("br");
var txt=document.createTextNode("dit is div " + i);
 
	img.src=album[imgnr].url;
	img.style.margin ="10px";
	img.style.padding ="10px";
	img.style.height="80%";
	img.onclick=getImgId;
		div.setAttribute("id","divje" + i);
		div.appendChild(img)
		div.setAttribute('style','float:left');
		div.style.width="20%";
		div.style.height="20%";
		div.appendChild(br);
		div.appendChild(txt);
			maindiv.appendChild(div);
		}
	}
 
function getImgId(){ id = this.id; alert( id ) }
function vulpagina()	{
	var maindiv=document.getElementById("maindiv");
		
for(i=0; i<26; i++){
	var imgnr = i;
var div=document.createElement("div");
var img=document.createElement("img");
var br=document.createElement("br");
var txt=document.createTextNode("dit is div " + i);

	img.src=album[imgnr].url;
	img.style.margin ="10px";
	img.style.padding ="10px";
	img.style.height="80%";
	img.onclick=getImgId;
		div.setAttribute("id","divje" + i);
		div.appendChild(img)
		div.setAttribute('style','float:left');
		div.style.width="20%";
		div.style.height="20%";
		div.appendChild(br);
		div.appendChild(txt);
			maindiv.appendChild(div);
		}
	}
		
function getImgId(){ id = this.id; alert( id ) }

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Sep 13th, 2009

Re: Help JS Event onclick to get ID

Hey junkhead, did you finish school?!!
What grade did you get?

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Sep 14th, 2009

Re: Help JS Event onclick to get ID

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.

Sereal_Killer

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

17 posts
since Nov 2008

Permalink

Sep 14th, 2009

Re: Help JS Event onclick to get ID

Click to Expand / Collapse Quote originally posted by Sereal_Killer ...

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!

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

505 posts
since Jun 2008

Permalink

Sep 14th, 2009

Re: Help JS Event onclick to get ID

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

Sereal_Killer

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

17 posts
since Nov 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: find text

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: run command when paste

DaniWeb Message

Cancel Changes

User Name
Password