ランダムな色ですべて同時にコンテナを作成する方法？

トルー：

私の次のコードは、本質的に、ユーザの入力に応じてボックスの数を生成します。
しかし、私は彼らが作成されたとき、彼らはすべてのランダムな色を持っていることを確認します。

私はまた、作成したそれぞれの新しいボックスのために、それは（最初のボックスにはマージン左5pxのを持っている場合）のmargin-leftボックスのは、二重の前のボックスのマージンように設定していることを確認します。

私はどのようにこれを行うには考えています！

function getNewRandomColor()
{
  var myArray = ['red', 'green', 'blue'];    
  var rand = myArray[Math.floor(Math.random() * myArray.length)];
  document.getElementById("container").style.backgroundColor = rand;
}

var empty = true;

function setup()
{
  if (!empty)
  {
    remove();
  }

  size = document.getElementById("input").value

  var container = document.getElementById("container");

  // create boxes
  for (var i = 0; i < size; i++)
  {
    // Create a box
    var box = document.createElement("div");

    // insert number
    box.innerHTML = i+1;

    // Add into the document
    container.appendChild(box);
    empty = false;
  }    
}

function remove()
{
  // Get all the generated boxes
  var boxes = document.getElementById("container").children;

  // Iterate through all boxes
  for (var x = 0; x < boxes.length;) 
  {
    var bA = boxes[x];
    bA.remove();
  } 
}

body {
  font-family:sans-serif;
  font-weight:700;
  font-size:15pt;
} 
#container div, div.selected {
  width: 2em;
  height: 1.5em;
  float: left;
  padding: 1em;
  margin: 1vw;
  padding-top:1.5em;
  text-align: center;
  transition: background 1s;
}
div, .unselected {
  background: #a0aeef;
}

<input type="number" name="input" id="input">

<button onclick="setup();">Draw</button>
<button onclick="remove();">Remove</button>

<div id="container"></div>

G-シリル;

あなただけの要素は、ドキュメントのDOMの一部になると、その場でスタイルを適用することができ、配列のキーを取得し、クラス名としてそれを使用することができます。

EX

function getNewRandomColor(e)
{
  var myArray = ['red', 'green', 'blue'];    
  var rand = myArray[Math.floor(Math.random() * myArray.length)];
  return rand;
}

var empty = true;

function setup()
{
  if (!empty)
  {
    remove();
  }

  size = document.getElementById("input").value

  var container = document.getElementById("container");
 
  // create boxes
  for (var i = 0; i < size; i++)
  {
    // Create a box
    var box = document.createElement("div");
    var rdmClass= getNewRandomColor();
    box.setAttribute("class",rdmClass);
    marginVar = 10*i;
    box.setAttribute("style","--margR:" + marginVar  + ";border:solid/* here you bg with hex value to be updated " );
    // insert number
    box.innerHTML = i+1;
    // Add into the document
    container.appendChild(box);
    empty = false;
  }    
}

function remove()
{
  // Get all the generated boxes
  var boxes = document.getElementById("container").children;

  // Iterate through all boxes
  for (var x = 0; x < boxes.length;) 
  {
    var bA = boxes[x];
    bA.remove();
  } 
}

body {
  font-family:sans-serif;
  font-weight:700;
  font-size:15pt;
} 
#container div, div.selected {
  width: 2em;
  height: 1.5em;
  float: left;
  padding: 1em;
  margin: 1vw;
  padding-top:1.5em;
  text-align: center;
  transition: background 1s;
}
div, .unselected {
  background: #a0aeef;
}

#container div{
  margin-right:calc(var(--margR)*1px); /* updated from the style attribute added from js loop */
}

.red {background:red;}
.green {background:green;}
.blue {background:blue;}

<input type="number" name="input" id="input">

<button onclick="setup();">Draw</button>
<button onclick="remove();">Remove</button>

<div id="container"></div>