How to change the value of the class name in HTML document with javascript

Question

I have few divs with a single class name, my objective is to change the class name value of the div when a particular link is clicked, and below was my approach.

I stored class name values in an array, then used document.getElementsByClassName("test") and stored it into an array elements, and then I ran a for loop to replace class name value. :

function changeClass(value){
    style = [ 'view view-first', 'view view-second', 'view     view-third', 'view view-fourth', 'view view-fifth' ];
    var elements = document.getElementsByClassName("test");
    for(var i = elements.length - 1; i >= 0; i++)
    {
        elements[i].className = style[value];
    }   
}

When I run this code, only a single div class name is replaced. I want all the class name to be replaced.

i-- or for(var i=0; i<elements.length;i++)

nelek
– nelek

2015-11-05 13:05:22 +00:00
Commented Nov 5, 2015 at 13:05 — nelek
– nelek, Commented Nov 5, 2015 at 13:05
that was a grave error, thanks mate for the help.

Saurabh Chaudhary
– Saurabh Chaudhary

2015-11-05 13:07:18 +00:00
Commented Nov 5, 2015 at 13:07 — Saurabh Chaudhary
– Saurabh Chaudhary, Commented Nov 5, 2015 at 13:07

Nisse Engström · Accepted Answer · 2015-11-10 17:32:52Z

2

Try this:

function changeClass(value){
    style = [ 'view view-first', 'view view-second', 'view     view-third', 'view view-fourth', 'view view-fifth' ];
    var elements = document.getElementsByClassName("test");
    for(var i = elements.length - 1; i >= 0; i--)
    {
        elements[i].className = style[value];
    }   
}

OR

function changeClass(value){
    style = [ 'view view-first', 'view view-second', 'view     view-third', 'view view-fourth', 'view view-fifth' ];
    var elements = document.getElementsByClassName("test");
    for(var i=0; i<elements.length;i++)
    {
        elements[i].className = style[value];
    }   
}

edited Nov 10, 2015 at 17:32

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered Nov 5, 2015 at 13:07

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Levent ÖZÇELİK · Accepted Answer · 2015-11-05 13:11:34Z

0

var elems = $('.oldclasses');
elems.removeClass('oldclasses');
elems.addClass('newClass');

So you not need $.each function for that jquery can apply the commands to all elems or single elem.

answered Nov 5, 2015 at 13:11

Levent ÖZÇELİK

11 bronze badge

Comments

madalinivascu · Accepted Answer · 2015-11-05 13:12:01Z

0

Try:

style = [ 'view view-first', 'view view-second', 'view     view-third', 'view view-fourth', 'view view-fifth' ];
$('.test').each(function(i,v) {
     if (style[i]) {
        $(this).attr('class',style[i]);
     }
});

edited Nov 5, 2015 at 13:12

answered Nov 5, 2015 at 13:08

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

1 Comment

madalinivascu Over a year ago

you have the jquery tag

Collectives™ on Stack Overflow

How to change the value of the class name in HTML document with javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related