Manipulating Dom Elements

Question

I want to change the class of an element, but when the class is changed it doesn't apply the CSS that i have written for it . Any help ? The code is :

HTML

<div id ='tot'>
<button type='button' class='cls1' id='id1'></button>

<button type='button' class='cls2' id='id2'></button>

<button type='button' class='cls3' id='id3'></button>

<button type='button' class='cls4' id='id4'></button>

<button type='button' id='start'>Click Me!</button> 
</div>

CSS

.cls1{
    position: absolute;
    background-color: red;
    width: 12%;
    height: 12%;
    border: 2px solid black;

   }

.cls12{
    position: absolute;
    background-color: #C24641;
    width: 12%;
    height: 12%;
    border: 2px solid black;

    }

JQUERY

$(document).ready(function(){

        $('#start').click(function(){

            game();
        })

        function game(){

            var x = Math.floor((Math.random() * 4) + 1);
            change1(x);
        }

        function change1(y){

            var z = 'cls' + y;
            var t = 'cls' + y + 2;
            alert(z);
            alert(t);
            schimb = document.getElementsByClassName(z); 
            $(schimb).removeClass(z);
            $(schimb).addClass(t);

        }


    })

When i change the element from class 1 to class 12 it just doesn't apply the css...

Answer 1

You're using jQuery so there is no need to select elements using getElementsByClassName because it's not defined under all browsers:

    function change1(y){
        var z = 'cls' + y;
        var t = 'cls' + y + 2;
        alert(z);
        alert(t);
        $("." + z).removeClass(z).addClass(t);
    }

Answer 2

You can use jQuery to fetch the target elements. jQuery does not accept an array of elements as a parameter, so $(schimb) will not return an elements

function change1(y) {
    var z = 'cls' + y;
    var t = 'cls' + y + 2;
    $('.'+z).removeClass(z).addClass(t);
}

Demo: Fiddle - Look at your console logs to see what is happening

Answer 3

I made some changes in your code:

• you obviously need CSS classes for all your buttons if you want to style them

• removed the position:absolute; because it was covering the "start" button

• if you only have cls12 you need to change it always to that, not to for example cls32 in case the first one is cls3

• using selection by class name may cause problems in some browsers, in pure JS use only selection by ID - it was substituted in the code by jQuery selector

See this fiddle: http://jsfiddle.net/2c2dx/

$(document).ready(function () {

    $('#start').click(function () {

        game();
    })

    function game() {

        var x = Math.floor((Math.random() * 4) + 1);
        change1(x);
    }

    function change1(y) {

        var z = 'cls' + y;
        var t = 'cls' + y + 2;
        alert(z);
        alert(t);
        schimb = $('.' + z);
        $(schimb).removeClass(z);
        $(schimb).addClass('cls12');
    }
})

I would also like to suggest the following changes:

• use semicolons even if you don't have to.. this may cause problems which will make you go crazy if you try to find them later on..

• use variables that make sense; you should know what they are just by looking at them

• optimize the code in the following way

HTML:

<button type='button' class='changable' id='changable-1'></button>
<button type='button' class='changable' id='changable-2'></button>
<button type='button' class='changable' id='changable-3'></button>
<button type='button' class='changable' id='changable-4'></button>
<button type='button' id='start'>Click Me!</button>

CSS:

.changable {
    background-color: red;
    width: 12%;
    height: 12%;
    border: 2px solid black;
}

.changed {
    background-color: #0000FF;
    width: 12%;
    height: 12%;
    border: 2px solid black;
}

JS:

$(document).ready(function () {

    $('#start').click(function () {

        game();
    });

    function game() {

        var buttonToChange = $('#changable-' + Math.floor((Math.random() * 4) + 1));
        change1(buttonToChange);
    }

    function change1(button) {

        button.removeClass('changable').addClass('changed');
    }
});

JSFiddle: http://jsfiddle.net/Cx5VK/