Javascript數組隨機化元素到選定的元素

Question

我想做一個函數，當你點擊其中一個骰子元素時，它將重新擲骰子，並且它的左邊的每個元素都重新滾動。

目前我已經有了它，當你加載頁面，骰子編號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); 
    }); 
}()); 

繼承人的HTML

<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

您已經擁有了模具的指數點擊並被困在一個封閉的所有骰子的陣列。您只需要使用它們（輕鬆）是這樣的：

(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>