2017-08-26 84 views
0

我想获得一个函数来重复一个单独的eventListener的代码。事件监听器仅执行一次该过程。 while循环意图完成进程'num'次。当eventListener按钮工作时,并且将正确分配“dice-”+ dice +“.png”并显示适当的图形文件,while循环不会。它会生成一个随机的.png文件,并显示这个num时间,即使每次迭代都会产生一个新的随机数。为了避免混淆,我已经为每个案例分别命名了变量。DOM - 分配随机数来操作

document.querySelector(".btn-roll").addEventListener("click", function() { 
    //1. Rnd number 
    dice = Math.floor(Math.random() * 6) + 1; 

    //2. Display the result 
    var diceDOM = document.querySelector(".dice"); 
    diceDOM.style.display = "block"; 
    diceDOM.src = "dice-" + dice + ".png"; 
    console.log(diceDOM); 
}); 

//roll dice num times 
function rollDice(num) { 
    var i = 1; 
    var dice2 = 0; 
    while (i < num) { 
     //1. Rnd number 
     dice2 = Math.floor(Math.random() * 6) + 1; 
     console.log("Dice: " + dice2); //error checking. dice2 is producing new number each loop iteration 

     //update diceDOM with new dice value 
     var diceDOM2 = document.querySelector(".dice"); 
     diceDOM2.style.display = "block"; 
     diceDOM2.src = "dice-" + dice2 + ".png"; 
     console.log(diceDOM2); //error checking. diceDOM appears to be set on calling loop fist time (not set by dice var, but an alternative random number) 
     i++; 
    }; 
}; 

回答

0

发现缺陷 - 或者说,没有实际错误存在。

为了看到发生的变化,diceDOM2.src需要特定的控制台记录。出于某种原因,控制台打印整个对象确实会给出更新的src!