Estoy tratando de crear varios divs dentro del div que tiene el id "segundo".

 <div> <div class="content" id="first" hidden></div> <div class="content" id="second" hidden></div> <div class="content" id="third" hidden></div> </div>

He probado la siguiente función pero no funciona.

 function createboard(){ for(let i=0;i<10;i++){ let newDiv = document.createElement("div"); newDiv.className="column"; newDiv.id="column"; document.getElementById("second").appendChild(newDiv); } }

La función que elimina el atributo oculto del div.

 function hide_div(){ if(document.getElementById("cavidades").value == "" || document.getElementById("sementes").value==""){ alert("Preencha todos os dados de jogo antes de começar"); } else{ var start_div = document.getElementById("start_div"); start_div.hidden=true; var login=document.getElementById("login"); login.hidden=true; var first = document.getElementById("first"); var second = document.getElementById("second"); var third = document.getElementById("third"); var inside=document.getElementById("inside"); first.hidden=false; second.hidden=false; third.hidden=false; inside.hidden=false; }

Se supone que ambos se ejecutan cuando se hace clic en este botón

 <button hidden type="submit" id="start" onclick="hide_div() ; createboard()">Começar</button>

CSS de ambos divs

 div#second{ float: left; background-color: lightgray; height: 500px; width: 500px; border: 5px solid black; } div#column{ float: left; background-color: green; height: 50px; width: 50px; border: 5px solid yellow; }