根据变量显示多个 div

Question

How I can print N divs (each div represent a dot) dynamically? I am new in HTML and CSS, is there a way to print N divs depending on a variable. Do I need a Jquery function?

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

Thats my code: https://jsfiddle.net/bpc8shra/

Answer 1

You can do it with JS. Enter a number and click create button:

 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

I hope I understood you correctly, YOU mean something like this:

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

https://jsfiddle.net/9sh7bm21/