我有一个骰子函数,它将骰子的总和相乘,将总和存储在变量中,然后打印出总和。没问题,但是当我运行应用程序两次。第二个应用程序会影响第一个应用程序的总和。
我尝试使用localStorage,但没有任何效果。这是我在两个应用程序中显示不同结果的最接近的
我希望能够运行多个应用程序,但不能泄漏信息。 有什么提示吗?
jsFiddle http://jsfiddle.net/dymond/gUL9U/< - 运行应用程序两次,你就会发现问题。
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);
}
}
答案 0 :(得分:1)
试试这段代码: Main.js
function pageWrap(){
/* --------DIV TAGGAR MED CLASS -------- */
var outerDiv = createElementWithClass('div', 'dice-window-wrapper'),
innerDiv = createElementWithClass('div', 'dice-menubar-wrapper');
outerDiv.appendChild(innerDiv);
document.getElementById("page-content-wrapper").appendChild(outerDiv);
var dice_windows_wrapper_close = createElementWithClass('div', 'close');
innerDiv.appendChild(dice_windows_wrapper_close);
var dice_toolbar_wrapper_close = createElementWithClass('div', 'dice-toolbar-wrapper');
outerDiv.appendChild(dice_toolbar_wrapper_close);
var add_remove_roll = createElementWithOutClass('ul');
dice_toolbar_wrapper_close.appendChild(add_remove_roll);
var dice_content_wrapper = createElementWithClass('div', 'dice-content-wrapper');
outerDiv.appendChild(dice_content_wrapper);
var 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");
var 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*/
var ul_dice_sides = createElementWithOutClass('ul');
dice_content_wrapper.appendChild(ul_dice_sides);
/*###CREATE ADD_REMOVE_ROLL DICES ###*/
function add_remove_roll_func(){
for (var i = 0; i<arguments.length; i++){
li_dice_side_one = createElementWithClass('li',arguments[i]);
add_remove_roll.appendChild(li_dice_side_one);
}
}
/*ADD EVENT*/
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"];
function addDiceEvent() {
var rand = diceArray[Math.floor(Math.random() * diceArray.length)];
dicesides_func.call(addClass,rand);
document.getElementById('mySound').play();
}
}
AddEvent();
/*ADD EVENT END*/
/*REMOVE DICE*/
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);
dicesides_func.call(remove);//dicesides_func();
}
}
RemoveEventDice();
/*REMOVE DICE END*/
/*ROLL DICE*/
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;
}
dicesides_func.call(addClass);//dicesides_func();
}
}
rollEvent();
/*END ROLL DICE*/
function CloseEvent(){ /*Behöver ändras om index sidan ändras*/
var CloseEvent = "close";
var addClassArr= document.getElementsByClassName(CloseEvent);
var addClass = addClassArr[addClassArr.length-1];
addClass.addEventListener("click", closebutton, true);
function closebutton(e) {
var classToRemove = " "+"dice-window-wrapper"+" ";
var obj=e.target;
while((" "+obj.className+" ").indexOf(classToRemove)==-1){
obj=obj.parentNode;
}
obj.parentNode.removeChild(obj);
}
}
CloseEvent();
movewrap();
}
functioner.js
/*###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;
}
/* Funktionen som visar nya tabort och kasta tärningarna ## END */
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;
}
function dicesides_func(nr){
var elementToAddDice=" dice-window-wrapper ", obj=this, dice,i=0,total=0;
while((" "+obj.className+" ").indexOf(elementToAddDice)==-1){
obj=obj.parentNode;
}
obj=obj.getElementsByTagName("ul")[2];
if(nr){
var dicessides = createElementWithClass('li',nr);
obj.appendChild(dicessides);
dice = obj.getElementsByTagName("li");
}else{
dice = obj.getElementsByTagName("li");
}
for(i=0;i<dice.length;i++){
total=total+getNumberForClass(dice[i].className);
}
// console.log(obj.parentNode.parentNode.className.getElmentsByClassName[]);
var wrapper = obj.parentNode.parentNode.getElementsByClassName("dice-toolbar-counter-wrapper")[0];
while (wrapper.hasChildNodes()) {
wrapper.removeChild(wrapper.lastChild);
}
var ttl = total.toString();
for (var x = 0;x<ttl.length;x++) {
var newelem = createElementWithClass('li',"side-" + ttl[x]);
//alert(dice_toolbar_counter_wrapper_Li)
wrapper.appendChild(newelem);
}
}
答案 1 :(得分:0)
选择正确的包装器,您应该没问题:在创建应用程序时可能使用全局计数器变量,以便稍后了解您当前使用的应用程序?
本节选择第一个包装器:
var wrapper = document.getElementsByClassName("dice-toolbar-counter-wrapper")[0];
如果我将此0更改为1而不是upp upp应用程序no 2而不是1,因为您实际上是在包装器数组中选择[0]键。
Snyggt btw!