I am running a function that dynamically creating divs and populates them from an xml file. what i have been trying to do is to add an onclick event to the divs so when one is clicked it would run a function. here is my code.
function loadlist()
{
var xmlDoc=null;
if (window.ActiveXObject)
{
// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
//specify xml source location
xmlDoc.async=false;
xmlDoc.load('videos/video_lists/movies/english/movielist.xml');
}
var x=xmlDoc.getElementsByTagName("MOVIE");
var i=0;
var outerNi = document.getElementById('outerDiv');
//loop to create the outer divs
for (i=0;i<x.length;i++)
{
var outerBoxDiv = document.createElement('div');
var outerId = 'movie'+i;
outerBoxDiv.setAttribute('id',outerId);
outerNi.appendChild(outerBoxDiv);
}
for (i=0;i<x.length;i++)
{
//go through the outer divs and place these divs under each one with specific id
var ni = document.getElementById('movie'+i);
var LOCATION=(x.getElementsByTagName("Location")[0].childNodes[0].nodeValue);
//create div for thumbnail
var imageDiv = document.createElement('img');
var imageId = 'image'+i;
imageDiv.setAttribute('id',imageId);
ni.appendChild(imageDiv);
//create div for title
var titleDiv = document.createElement('div');
titleId = 'title' + i;
titleDiv.id = titleId;
if(titleDiv.addEventListener)
{
titleDiv.addEventListener('click',test,false);
}else if (titleDiv.attachEvent)
{
titleDiv.attachEvent('onclick',test,true);
}
ni.appendChild(titleDiv);
}
function test()
{
alert(this.id);
}
}
the above code works for firefox but ie doesn't like this.id. it gives me undefined error. I saw somewhere else that i am supposed to use bindasevenetlistener() so the this would work but i am not sure how this is supposed to be done or if there is another way of doing this.
function loadlist()
{
var xmlDoc=null;
if (window.ActiveXObject)
{
// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
//specify xml source location
xmlDoc.async=false;
xmlDoc.load('videos/video_lists/movies/english/movielist.xml');
}
var x=xmlDoc.getElementsByTagName("MOVIE");
var i=0;
var outerNi = document.getElementById('outerDiv');
//loop to create the outer divs
for (i=0;i<x.length;i++)
{
var outerBoxDiv = document.createElement('div');
var outerId = 'movie'+i;
outerBoxDiv.setAttribute('id',outerId);
outerNi.appendChild(outerBoxDiv);
}
for (i=0;i<x.length;i++)
{
//go through the outer divs and place these divs under each one with specific id
var ni = document.getElementById('movie'+i);
var LOCATION=(x.getElementsByTagName("Location")[0].childNodes[0].nodeValue);
//create div for thumbnail
var imageDiv = document.createElement('img');
var imageId = 'image'+i;
imageDiv.setAttribute('id',imageId);
ni.appendChild(imageDiv);
//create div for title
var titleDiv = document.createElement('div');
titleId = 'title' + i;
titleDiv.id = titleId;
if(titleDiv.addEventListener)
{
titleDiv.addEventListener('click',test,false);
}else if (titleDiv.attachEvent)
{
titleDiv.attachEvent('onclick',test,true);
}
ni.appendChild(titleDiv);
}
function test()
{
alert(this.id);
}
}
the above code works for firefox but ie doesn't like this.id. it gives me undefined error. I saw somewhere else that i am supposed to use bindasevenetlistener() so the this would work but i am not sure how this is supposed to be done or if there is another way of doing this.