Javascript not working?

Question

For some reason this isn't working? I want to fill the ul#list with some items, but it's not working.

var list = "";
for (var i = 0 ; i<=history.length; i++) {
    list += "<li onclick=\"copyShortURL('"+history[i].shortURL+"');\"><div class=\"short\">"+history[i].shortURL+"</div><div class=\"long\">"+history[i].longURL+"</div></li>";
}
document.getElementById('list').innerHTML = list;

Could anyone tell me what's going wrong :( By this i mean it doesnt do anything, no list items are put into the list?

P.S. This is for mobilesafari only :)

Answer 1

The createElement method only takes the element name eg. document.createElement("li")

Hence you either build the DOM in code using a series of createElements and appendChilds with a smattering of assignments to innerHTML. OR you build up the HTML as a string to be appended to "list" by finally assigning to its innerHTML.

Here is the string version:-

var asHTML = [];
for (var i = 0 ; i<=history.length; i++) 
{ 
  asHTML.push("<li onclick=\"copyShortURL('"+history[i].shortURL+"');\"><div class=\"short\">"+history[i].shortURL+"</div><div class=\"long\">"+history[i].longURL+"</div></li>"); 
  document.getElementById("list").innerHTML += asHTML.join("\n");
} 

Answer 2

The createElement method of document takes a single string for the element name you wish to create. You could then use DOM methods and properties to assign the click handler and then use innerHTML or DOM methods to create the inner elements.

There's also an error in your loop: you need < rather <= when checking against the length of the history array.

var ele, div, list = document.getElementById("list");

var createClickHandler = function(url) {
    return function() {
        copyShortURL(url);
    };
}

for (var i = 0, len = history.length; i < len; ++i)
     {
     ele = document.createElement("li");
     ele.onclick = createClickHandler(history[i].shortURL);

     div = ele.appendChild( document.createElement("div") );
     div.className = "short";
     div.appendChild( document.createTextNode(history[i].shortURL) );

     div = ele.appendChild( document.createElement("div") );
     div.className = "long";
     div.appendChild( document.createTextNode(history[i].longURL) );

     list.appendChild(ele);
     }

Answer 3

I would use the DOM to append child, then add classnames and event handlers to those children.

Here is a multi browser function I use

function addEventHandler(obj,eventName,handler){
    if (document.addEventListener){
        obj.addEventListener(eventName,handler,false);
    } else if (document.attachEvent){
        obj.attachEvent("on"+eventName,handler);


    } 
}
creat an array for tyhe bew elementsa and divs;
var elements = new Array();
var newDivsShort = new Array();
var newDivsLong = new Array();

then in your for loop you can,

for (var i = 0 ; i<=history.length; i++)   
{   
 newDivsShort[i] = document.createElement('div');
 newDivsLong[i] = document.createElement('div');

 elements[i] = document.createElement('li');
newDivsShort[i].className = "short";
newDivsLong[i].className = "long";

elements[i].appendChild(newDivsShort[i]);
elements[i].appendChild(newDivsLong[i]);
addEventHandler(elements[i],click,copyShortURL(history[i].shortURL));

}

you might have to use the format similar to the timeOUt function to pass a paramater.