So i have a function that show me random number images from the CSS class. The problem is when I am running the application twice , the second application change the images on the first application, while the random numbers DONT show up in the second application. I thought it could be because i didn't have local variable, but i get the same problem with or without the global vars. I could use Iframes, but there must be a away to get it work Js Only ?
I created a jsFiddle that show the problem, just press the run button twice and play with the dices you'll see my problem. http://jsfiddle.net/dymond/gUL9U/
and the function that creates the classes.
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
if(nr)
{
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");
}
else
{
dice = document.getElementsByClassName("dice");
}
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 ttl = total.toString();
var arr = [];
for (var i = 0;i<ttl.length;i++) {
var digit = ttl[i];
var newelem = createElementWithClass('li',"side-" + ttl[i]);
//alert(dice_toolbar_counter_wrapper_Li)
wrapper.appendChild(newelem);
}
}