Показать количество делений в зависимости от переменной

Question

Как я могу распечатать N div (каждый div представляет точку) динамически? Я новичок в HTML и CSS, есть ли способ вывести N div в зависимости от переменной. Нужна ли мне функция Jquery?

.dot-container {
    display: inline-block;
}
.dot{
  width:10px !important; 
  height:10px !important;
  border-radius: 50%;
  display: inline-block;
}

.red{
   background-color: red !important;
}
.blue{
   background-color: blue !important;
}
.yellow{
  background-color: yellow !important;
}

<div class="dot-container">
  <div class="dot red"></div>
  <div class="dot blue"></div>
  <div class="dot yellow"></div>
  <div class="dot red"></div>
</div>

Вот мой код: https://jsfiddle.net/bpc8shra/

Answer 1

Вы можете сделать это с JS. Введите число и нажмите кнопку «Создать»:

let button = document.getElementById("button")
, number = document.getElementById("number")
, ctn = document.getElementById("dot-container")
// Just a function to add random colors
, getRandomColor = function() {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}

button.addEventListener("click", () => {
  for(let i = 0; i < Number(number.value); i++){
      let dot = document.createElement("div");
      dot.classList.add("dot")
      dot.style.backgroundColor = getRandomColor();
      ctn.appendChild(dot)
  }
})

.dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

<input type="number" id="number" />
<button id="button">Create</button><br/><br/>
<div id="dot-container">
</div>

Answer 2

Надеюсь, я вас правильно понял, ВЫ подразумеваете что-то вроде этого:

var red_dots = 15
for (var i=0; i<red_dots;i++)
  $('.dot-container').append('<div class="dot red"></div>');

https://jsfiddle.net/9sh7bm21/