Changing Class Function is Not Working

Question

I have checked my javascript and it shows no error, but it is not doing anything at all.

Here is the html code:

<body>
    <!--The div who's function isn't working-->
    <div id="sliderButtonB" onclick='pageSliderBack()'>Go Back</div>    
    <!--End of not-functioning div-->
    <!--The Slider That is supposed to change **backwards** -->
    <div id='slidecarousel' class='p1' onclick='pageSlider(this)'>
        ...
        ...
        ...
    </div>
</body>

Here is the not-functioning javascript:

function pageSliderBack(){
    var pDiv = $('#slidecarousel')
    if ( pDiv.attr("class").match(/(?:^|\s)p1(?!\S)/) ){
         pDiv.className = "p5";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p2(?!\S)/) ){
        pDiv.className = "p1";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p3(?!\S)/) ){
        pDiv.className = "p2";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p4(?!\S)/) ){
        pDiv.className = "p3";
    } else if ( pDiv.attr("class").match(/(?:^|\s)p5(?!\S)/) ){
        pDiv.className = "p4";
    } else {
        pDiv.className = "SlideErr";
    }
}

Here is the rest of the javascript on the page; This function works, but the other doesn't:

function pageSlider(elem){
    if ( elem.className.match(/(?:^|\s)p1(?!\S)/) ){
         elem.className = "p2";
    } else if ( elem.className.match(/(?:^|\s)p2(?!\S)/) ){
        elem.className = "p3";
    } else if ( elem.className.match(/(?:^|\s)p3(?!\S)/) ){
        elem.className = "p4";
    } else if ( elem.className.match(/(?:^|\s)p4(?!\S)/) ){
        elem.className = "p5";
    } else if ( elem.className.match(/(?:^|\s)p5(?!\S)/) ){
        elem.className = "p1";
    } else {
        elem.className = "SlideErr";
    }
}

Change function pageSliderBack(elem) to function pageSliderBack() — Mansoorkhan Cherupuzha, Jan 12 '14 at 04:20
change onclick='pageSliderBack()' with onclick='pageSliderBack(this)' — sanjeev, Jan 12 '14 at 04:20
he never uses the parameter in the function, so it doesn't matter. — Barmar, Jan 12 '14 at 04:28

Barmar · Answer 1 · 2014-01-12T04:27:44.213

2

Just as in your last quertion, you're trying to access a DOM property on a jQuery element. It should be:

pDiv[0].className = "p5";

DEMO

edited Jan 12 '14 at 04:27

answered Jan 12 '14 at 04:16

Barmar

741,623
53
500
612

2

can I do that when I declared the variable?(e.g.var pdiv = $('#slidecarousel')[0]) – Jan 12 '14 at 04:31
Yes, then you'll have to use `pdiv.className.match` instead of `pdiv.attr('class').match`. – Barmar Jan 12 '14 at 04:33
1

You'll save yourself a lot of confusion if you stick to raw Javascript or jQuery throughout, instead of switching back and forth. – Barmar Jan 12 '14 at 04:33
1

Also, try to get rid of all that repeated code. Just get the number at the end of the class, add or subtract 1 to it, and then assign that as the new class. – Barmar Jan 12 '14 at 04:34

Edgar Villegas Alvarado · Accepted Answer · 2014-01-12T05:03:47.757

1

This solves your problem and cleans your code:

function pageSliderBack(){     
    var pDiv = $('#slidecarousel');
    if ( pDiv.hasClass("p1") ) pDiv.removeClass("p1").addClass("p5");
    else if ( pDiv.hasClass("p2") ) pDiv.removeClass("p2").addClass("p1");
    else if ( pDiv.hasClass("p3") ) pDiv.removeClass("p3").addClass("p2");
    else if ( pDiv.hasClass("p4") ) pDiv.removeClass("p4").addClass("p3");
    else if ( pDiv.hasClass("p5") ) pDiv.removeClass("p5").addClass("p4");
    else pDiv.addClass("SlideErr");    
}

Cheers

edited Jan 12 '14 at 05:03

answered Jan 12 '14 at 04:29

Edgar Villegas Alvarado

18,204
2
42
61

1

Cheers, from La Paz, Bolivia – Edgar Villegas Alvarado Jan 12 '14 at 04:59

score 0 · Answer 3 · edited May 23 '17 at 11:58

0

In your function pageSliderBack your are using jquery element i.e $('#slidercarousel') but setting className using normal javascript

Check jQuery className woes

instead use

pDiv.attr("class", 'p5'); or use pDiv.addClass('p5')

edited May 23 '17 at 11:58

Community

1
1

answered Jan 12 '14 at 04:29

Raunak Kathuria

3,185
1
18
27

Changing Class Function is Not Working

3 Answers3