2017-08-26 8 views
0

私は別のeventListenerのコードを繰り返す関数を取得しようとしています。イベントリスナーは、単に1回だけプロッセスを実行します。 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を返します!

関連する問題