Javascript配列要素をランダムにランダム化する

Question

ダイス要素の1つをクリックするとそのダイスがリロールされ、その左側のすべての要素もリロールされる関数を作成しようとしています。

現在、私はあなたがページをロードするときに、ダイスは1から6の番号が付けられています。ダイスをクリックすると、ダイスがリロールされます。選択した要素の左側にあるすべての要素を変更する方法を理解しようとすると、ちょっと困っています。

これは私が持っているものです。

(function() { 
    var dieElements; 

    dieElements = Array.prototype.slice.call(document.querySelectorAll('#dice div')); 

    dieElements.forEach(function (dieElement, whichDie) { 

    dieElement.textContent = whichDie + 1; 

    dieElement.addEventListener('click', function() { 
     dieElement.textContent = Math.floor(Math.random() * 6) + 1; 
    }, false); 
    }); 
}()); 

相続人

<fieldset id="dice-area"> 
<legend>Dice</legend> 
<div class="box-of-dice" id="dice"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</fieldset> 

Answer 1

がすでに持っている金型のインデックスがクリックされたhtmlと閉鎖に捕獲されたすべてのサイコロの配列。あなたには、いくつかのhtmlを投稿することができ

(function() { 
 
    var dieElements; 
 

 
    dieElements = Array.prototype.slice.call(document.querySelectorAll('#dice div')); 
 

 
    dieElements.forEach(function(dieElement, whichDie) { 
 
    dieElement.textContent = whichDie + 1; 
 

 
    dieElement.addEventListener('click', function() {     // when this die is clicked 
 
     for(var i = 0; i <= whichDie; i++)         // loop over all the elements in dieElements array from index 0 to index whichDie (included) 
 
     dieElements[i].textContent = Math.floor(Math.random() * 6) + 1; // change their textContent 
 
    }, false); 
 
    }); 
 
}());

#dice div { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    margin: 5px; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
}

<div id="dice"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>