Question

The title maybe is a little wrong but thats what I think the function should to to change to the right class.

So this is my problem, i have created a dice roller, that count the sum of the dices.
The thing is that the counter is images switching after the sum of the dices, and they are called by class name from zero to nine.

When i have one dice with number 5, the image 5 shows, but when i have 2 dices with sum lets say 5 + 2 image 5 and 2 shows and not 7. so the classChange wont work.
I tried to insert a element.className = ” ” but it change the variable right away since i put it in a loop. well, hard to explain so I did a jsFiddle.

http://jsfiddle.net/3nZNM/3/

The code for the counter are row between 81 and 125

function numberTotext(nr){
    var arrClass=["zero","one","two","three","four","five","six","seven","eight","nine"];
    ret=[];
    nr=nr.toString();
    for(i in nr){
        ret.push(arrClass[nr[i]]);
    }
    console.log(ret);
    return ret;
}
numberTotext(total)

        function turnCounter(){       
        for (var i = 0; i < arguments.length; i++){ 
            dice_toolbar_counter_wrapper_Li = createElementWithClass('li',arguments[i]);
            console.log(dice_toolbar_counter_wrapper_Li)
            dice_toolbar_counter_wrapper_Ul.appendChild(dice_toolbar_counter_wrapper_Li);
            document.getElementById("ul");
        } 



    }   turnCounter(ret);

Answer 1

Remove element before appending new one when you calculate the total each time, so the counter only shows one time and not multiple times. Also you have to change CSS to make it easier to be able to calculate what class you have to use.

WORKING JSFIDDLE DEMO

Change relevant parts of CSS to:

.dice-toolbar-counter-wrapper .side-0
{
    background-position : 0 0;
}

.dice-toolbar-counter-wrapper .side-1
{
    background-position : 0 -17px;
}

.dice-toolbar-counter-wrapper .side-2
{
    background-position : 0 -34px;
}

.dice-toolbar-counter-wrapper .side-3
{
    background-position : 0 -51px;
}

.dice-toolbar-counter-wrapper .side-4
{
    background-position : 0 -68px;
}

.dice-toolbar-counter-wrapper .side-5
{
    background-position : 0 -85px;
}

.dice-toolbar-counter-wrapper .side-6
{
    background-position : 0 -102px;
}

.dice-toolbar-counter-wrapper .side-7
{
    background-position : 0 -119px;
}

.dice-toolbar-counter-wrapper .side-8
{
    background-position : 0 -136px;
}

.dice-toolbar-counter-wrapper .side-9
{
    background-position : 0 -153px;
}

Change JS to:

/*###CREATE ELEMENT WITH CLASS ###*/

function createElementWithClass(elementName, className)
{
    var el = document.createElement(elementName);
    el.className = className;
    return el;
}

/*###CREATE ELEMENT WITHOUT CLASS ###*/
function createElementWithOutClass(elementName)
{    var el = document.createElement(elementName);
    return el;
  }
/*###CREATE ELEMENT WITH ID ###*/
function createElementWithId(elementName, idName)
{
    var element = document.createElement(elementName);
    element.id = idName;
    return element;
}    
var outerDiv = createElementWithClass('div', 'dice-window-wrapper'),
    innerDiv = createElementWithClass('div', 'dice-menubar-wrapper');
    outerDiv.appendChild(innerDiv);
    document.getElementById("page-content-wrapper").appendChild(outerDiv);

    dice_windows_wrapper_close = createElementWithClass('div', 'close');
    innerDiv.appendChild(dice_windows_wrapper_close);
    document.getElementById("dice-window-wrapper");

    dice_toolbar_wrapper_close = createElementWithClass('div', 'dice-toolbar-wrapper');
    outerDiv.appendChild(dice_toolbar_wrapper_close);
    document.getElementById("page-content-wrapper");

    add_remove_roll = createElementWithOutClass('ul');
    dice_toolbar_wrapper_close.appendChild(add_remove_roll);
    document.getElementById("dice-content-wrapper");

    dice_content_wrapper = createElementWithClass('div', 'dice-content-wrapper');
    outerDiv.appendChild(dice_content_wrapper);

    document.getElementById("page-content-wrapper");

    dice_toolbar_counter_wrapper_Ul = createElementWithClass('ul', 'dice-toolbar-counter-wrapper');
    dice_toolbar_wrapper_close.appendChild(dice_toolbar_counter_wrapper_Ul);


    add_remove_roll_func("add","remove","roll");

    lielement = createElementWithOutClass('li');
    add_remove_roll.appendChild(lielement);

    lielement.appendChild(dice_toolbar_counter_wrapper_Ul);


    /* <div class="dice-content-wrapper">*/  /*Visar tärningen som kastast*/
    ul_dice_sides = createElementWithOutClass('ul');
    dice_content_wrapper.appendChild(ul_dice_sides);
    document.getElementById("dice-content-wrapper");
    function add_remove_roll_func(){
        for (var i = 0; i<3; i++){
            li_dice_side_one = createElementWithClass('li',arguments[i]);
            add_remove_roll.appendChild(li_dice_side_one);
            document.getElementById("ul");
        }
    }


function getNumberForClass(className){
    var diceArray = Array=[ 
    "dice dice-side-one", 
    "dice dice-side-two", 
    "dice dice-side-three", 
    "dice dice-side-four", 
    "dice dice-side-five", 
    "dice dice-side-six"]; 
    return diceArray.indexOf(className)+1;
}

/*###CREATE DICES ###*/
function dicesides_func(nr){
    // go to dice-window-wrapper again
    // this could be put in a seporate functon
    var elementToAddDice=" dice-window-wrapper ",
    obj=this, // using this here that's why it's called wiht
    dice,i=0,total=0; // all the dice in this dice window
    // dicesides_func.call to set the right this context
    while((" "+obj.className+" ").indexOf(elementToAddDice)==-1){
        obj=obj.parentNode;
    }
    obj=obj.getElementsByTagName("ul")[2];
    var dicessides = createElementWithClass('li',nr);
    obj.appendChild(dicessides);
    // calculate total (can do in a seporate function)
    dice = obj.getElementsByTagName("li");
    for(i=0;i<dice.length;i++){
        total=total+getNumberForClass(dice[i].className);
    }
    //alert(total);

    var wrapper = document.getElementsByClassName("dice-toolbar-counter-wrapper")[0];

        while (wrapper.hasChildNodes()) {
    wrapper.removeChild(wrapper.lastChild);
     }

     var newelem = createElementWithClass('li',"side-" + total.toString());
            //alert(dice_toolbar_counter_wrapper_Li)
            wrapper.appendChild(newelem);



   function numberTotext(nr){
    var arrClass=["zero","one","two","three","four","five","six","seven","eight","nine"];
    ret=[];
    nr=nr.toString();
    for(i in nr){
        ret.push(arrClass[nr[i]]);
    }
    console.log(ret);
    return ret;
}
numberTotext(total)
/*
        function turnCounter(){       
        for (var i = 0; i < arguments.length; i++){ 
            dice_toolbar_counter_wrapper_Li = createElementWithClass('li',arguments[i]);
            //alert(dice_toolbar_counter_wrapper_Li)
            dice_toolbar_counter_wrapper_Ul.appendChild(dice_toolbar_counter_wrapper_Li);
            document.getElementById("ul");



        } 



    }   turnCounter(ret);*/
}
function AddEvent(){ 
        var AddEvent = "add"; 
        var addClass= document.getElementsByClassName(AddEvent); 
        addClass=addClass[addClass.length-1]; 
        addClass.addEventListener("click", addDiceEvent, true); 
        var diceArray = Array=[ 
        "dice dice-side-one", 
        "dice dice-side-two", 
        "dice dice-side-three", 
        "dice dice-side-four", 
        "dice dice-side-five", 
        "dice dice-side-six"]; 
        <!-- console.log("when set",addClass); -->
        function addDiceEvent() { 
            var rand = diceArray[Math.floor(Math.random() * diceArray.length)];
            dicesides_func.call(addClass,rand);
                  }        

    }
    AddEvent(); 
    function RemoveEventDice(){ 
        var removeEvent = "remove"; 
        var removeClass= document.getElementsByClassName(removeEvent); 
        var remove=removeClass[removeClass.length-1]; 
        remove.addEventListener("click", removeDice, true); 

        function removeDice(e) { 
            var obj=e.target; 
            var elementToRemove=" dice-window-wrapper "; 
            while((" "+obj.className+" ").indexOf(elementToRemove)==-1){ 
                obj=obj.parentNode; 
            } 
            var allDiceInWindow=obj.getElementsByClassName("dice"); 
            var diceToRemove=allDiceInWindow[allDiceInWindow.length-1]; 
            diceToRemove.parentNode.removeChild(diceToRemove); 
        } 
    }
    RemoveEventDice();
 function rollEvent(){ 
        var rollDices = "roll"; 
        var addClass= document.getElementsByClassName(rollDices); 
        addClass=addClass[addClass.length-1]; 
        addClass.addEventListener("click", rollDice, true); 
        var diceArray = Array=[ 
        "dice dice-side-one", 
        "dice dice-side-two", 
        "dice dice-side-three", 
        "dice dice-side-four", 
        "dice dice-side-five", 
        "dice dice-side-six"]; 
        function rollDice(e) { 
    var obj=e.target; 
    var elementToRemove = " dice-window-wrapper "; 
    while((" "+obj.className+" ").indexOf(elementToRemove)==-1){ 
        obj=obj.parentNode; 
    }
    var allDiceInWindow=obj.getElementsByClassName("dice"); 

    for(var i = 0; i<allDiceInWindow.length; i++){
        // set the name individually for each die
        var name = diceArray[Math.floor(Math.random() * diceArray.length)]; 
        allDiceInWindow[i].className = name;
    }
} 
    }
    rollEvent();