Page 1 of 1

Problem with setting classname

Posted: Thu Jul 16, 2009 11:57 am
by amp0201
Hi there,

I am having a small problem. Can someone please help me out.

Code: Select all

this.changeHighlight = function()
    {
        var lis = this.div.getElementsByTagName('LI');
        for (i in lis)
        {
            var li = lis[i];
 
            if (this.highlighted == i)
            {
                li.className = "selected";
                //li.setAttribute("className","selected");
                
            }
            else
            {
                li.className = "";
                //li.setAttribute("className","");
                
            }
        }
    };
I tried the above code, which works fine with IE 8. However, this code doesn't work with firefox. Instead of li.className, I tried li.setAttribute, but still it doesn't work.

Help needed please !!!!

Thanks,
Akhil

Re: Problem with setting classname

Posted: Thu Jul 16, 2009 3:17 pm
by kaszu

Code: Select all

for (i in lis)
will also return item, length, namedItem
Instead use one of the following

Code: Select all

for (var i=0, j=lis.length; i<j; i++) {
or

Code: Select all

for (i in lis) {
    if (lis.hasOwnProperty(i)) {
        //...
    }
Other than that code looks fine.

Re: Problem with setting classname

Posted: Thu Jul 16, 2009 3:51 pm
by amp0201
Still it doesn't work.

this.changeHighlight = function()
{
var lis = this.div.getElementsByTagName('LI');
for (i in lis)
{
if(lis.hasOwnProprty(i))
{
var li = lis;

if (this.highlighted == i)
{
//li.className = 'selected';
li.setAttribute('class','selected');

}
else
{
//li.className = "";
li.setAttribute('class','');

}
}
}
};

I am trying to run this on firefox, but it doesnt work. Moreover the above code now doesnt even work on IE.
If I use li.className instead of li.setAttribute, code runs fine on IE, but not on firefox. The code should be able to run on both the browsers, but right now it doesnt do so. Thanks for help in advance.

Re: Problem with setting classname

Posted: Thu Jul 16, 2009 3:52 pm
by amp0201
There is one more place in code, where I am using this.

this.createDiv = function()
{
var ul = document.createElement('ul');

//Create an array of LI's for the words.
for (i in this.eligible)
{
var word = this.eligible;

var li = document.createElement('li');
var a = document.createElement('a');
a.href="javascript:false";
a.innerHTML = word;
li.appendChild(a);

if (me.highlighted == i)
{
//li.className = 'selected';
li.setAttribute('class','selected');
}

ul.appendChild(li);
}

Re: Problem with setting classname

Posted: Thu Jul 16, 2009 4:53 pm
by arjan.top
i.className

Re: Problem with setting classname

Posted: Thu Jul 16, 2009 5:45 pm
by amp0201
This what i wrote, but still doesnt work on neither of the browser.

this.changeHighlight = function()
{
var lis = this.div.getElementsByTagName('LI');
//for (i in lis)
for (var i=0, j=lis.length; i<j; i++)
{
//if(lis.hasOwnProperty(i))
{
var li = lis;

if (this.highlighted == i)
{
//li.className = 'selected';
//li.class = "selected"
//li.setAttribute("class","selected");
i.className = "selected";

}
else
{
//li.className = "";
//li.setAttribute("class","");
i.className = "";

}
//}
}
};

this.createDiv = function()
{
var ul = document.createElement('ul');

//Create an array of LI's for the words.
for (i in this.eligible)
{
var word = this.eligible;

var li = document.createElement('li');
var a = document.createElement('a');
a.href="javascript:false";
a.innerHTML = word;
li.appendChild(a);

if (me.highlighted == i)
{
li.className = "selected";
//li.class = "selected"
//li.setAttribute("class","selected");
}

ul.appendChild(li);
}

this.div.replaceChild(ul,this.div.childNodes[0]);