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

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

Recommended Answers

All 6 Replies

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.

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

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.

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 ) }
commented: helpfull +1

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

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.

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!

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.