Problem with setting classname

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
amp0201
Forum Newbie
Posts: 4
Joined: Thu Jul 16, 2009 11:52 am

Problem with setting classname

Post 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
Last edited by califdon on Thu Jul 16, 2009 12:17 pm, edited 1 time in total.
Reason: Moderator corrected tags to display Javascript code
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Problem with setting classname

Post 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.
amp0201
Forum Newbie
Posts: 4
Joined: Thu Jul 16, 2009 11:52 am

Re: Problem with setting classname

Post 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.
amp0201
Forum Newbie
Posts: 4
Joined: Thu Jul 16, 2009 11:52 am

Re: Problem with setting classname

Post 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);
}
User avatar
arjan.top
Forum Contributor
Posts: 305
Joined: Sun Oct 14, 2007 4:36 am
Location: Hoče, Slovenia

Re: Problem with setting classname

Post by arjan.top »

i.className
amp0201
Forum Newbie
Posts: 4
Joined: Thu Jul 16, 2009 11:52 am

Re: Problem with setting classname

Post 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]);
Post Reply