如何在JS中返回数组中的元素相同的次数

Question

I want to make 42 spans in this HTML have equal amount of colors from an array through for-loop in JS.

The equal amount is determined through a HTML form which works fine.

eg When I type 5 and click 'start', then the 42 spans should have 5 different colors - meaning one color for 8-9 spans.

I tried using splice but that didn't work out..

function colorMe() {
var num = document.getElementById('quant').value;
var col = ["#CC004C", "#0080D0", "#FCB711","#0DB14B", "#6460AA", "#F37021"];
var snum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42];
  var xnum = num / 6;

for (i = 1; i <= xnum; i++) { 
  for (j = 0; j < num; j++) { 
    var y = snum.splice(Math.floor(Math.random()*snum.length-jy),1)[0];
    document.getElementById('s'+y).style.backgroundColor = col[j];
  }
}
}

Here is the code so far:

 function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function colorMe() { var num = document.getElementById('quant').value; var color = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"]; var i; for (i = 1; i <= 42; i++) { document.getElementById('s' + i).style.backgroundColor = color[getRndInteger(0, num)]; } } 

 <form id="tion" action="" method="get"> Player (between 2 and 6): <input type="number" id="quant" min="2" max="6"> <input type="button" value="start" onclick="colorMe()"> </form> <span id="s1">s1</span> <span id="s2">s2</span> <span id="s3">s3</span> <span id="s4">s4</span> <span id="s5">s5</span> <span id="s6">s6</span> <span id="s7">s7</span> <span id="s8">s8</span> <span id="s9">s9</span> <span id="s10">s10</span> <span id="s11">s11</span> <span id="s12">s12</span> <span id="s13">s13</span> <span id="s14">s14</span> <span id="s15">s15</span> <span id="s16">s16</span> <span id="s17">s17</span> <span id="s18">s18</span> <span id="s19">s19</span> <span id="s20">s20</span> <span id="s21">s21</span> <span id="s22">s22</span> <span id="s23">s23</span> <span id="s24">s24</span> <span id="s25">s25</span> <span id="s26">s26</span> <span id="s27">s27</span> <span id="s28">s28</span> <span id="s29">s29</span> <span id="s30">s30</span> <span id="s31">s31</span> <span id="s32">s32</span> <span id="s33">s33</span> <span id="s34">s34</span> <span id="s35">s35</span> <span id="s36">s36</span> <span id="s37">s37</span> <span id="s38">s38</span> <span id="s39">s39</span> <span id="s40">s40</span> <span id="s41">s41</span> <span id="s42">s42</span> 

Answer 1

As @HereticMonkey said, using random means there are no guarantees as to how many times each color is going to show up. However we can make sure that the randomness is limited to a fixed set of options, then we can make sure that that fixed set contains all possibilities we want to randomly distribute. Then by simply removing the selected option, we can use random and still have a guarantee as to how many times each color is going to show up.

Note: Since we never want to see a span without a color, we will be over estimating the nr of needed colors on purpose. Aka Math.ceil(42/num) . This means that sometimes you will see one or two more instances of a single color than expected. If this turns out to be a problem, then you can change Math.ceil(42/num) to Math.floor(42/num) . However you will have to add some edge case logic for handling spans that end up without an assigned color.

 const prepareColorArray = (colors, multiplicationFactor) => { let returnColors = colors; for (let i = 0; i < multiplicationFactor; i++) { returnColors = [...returnColors, ...colors]; } return returnColors; } function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min)) + min; } const allColors = ["#FCB711", "#F37021", "#CC004C", "#6460AA", "#0080D0", "#0DB14B"]; function colorMe() { const num = document.getElementById('quant').value; let color = prepareColorArray(allColors.slice(0, num), Math.ceil(42/num)); for (let i = 1; i <= 42; i++) { const j = getRndInteger(0, color.length-1); document.getElementById('s' + i).style.backgroundColor = color[j]; color = color.filter((_, i) => i !== j); } } 

 <form id="tion" action="" method="get"> Player (between 2 and 6): <input type="number" id="quant" min="2" max="6"> <input type="button" value="start" onclick="colorMe()"> </form> <span id="s1">s1</span> <span id="s2">s2</span> <span id="s3">s3</span> <span id="s4">s4</span> <span id="s5">s5</span> <span id="s6">s6</span> <span id="s7">s7</span> <span id="s8">s8</span> <span id="s9">s9</span> <span id="s10">s10</span> <span id="s11">s11</span> <span id="s12">s12</span> <span id="s13">s13</span> <span id="s14">s14</span> <span id="s15">s15</span> <span id="s16">s16</span> <span id="s17">s17</span> <span id="s18">s18</span> <span id="s19">s19</span> <span id="s20">s20</span> <span id="s21">s21</span> <span id="s22">s22</span> <span id="s23">s23</span> <span id="s24">s24</span> <span id="s25">s25</span> <span id="s26">s26</span> <span id="s27">s27</span> <span id="s28">s28</span> <span id="s29">s29</span> <span id="s30">s30</span> <span id="s31">s31</span> <span id="s32">s32</span> <span id="s33">s33</span> <span id="s34">s34</span> <span id="s35">s35</span> <span id="s36">s36</span> <span id="s37">s37</span> <span id="s38">s38</span> <span id="s39">s39</span> <span id="s40">s40</span> <span id="s41">s41</span> <span id="s42">s42</span>