无法在id为second的div内部创建多个子div问题排查

问题原因 #

• 按钮为submit类型，若处于<form>标签内，点击后会触发表单默认提交行为导致页面刷新，刚动态创建的子div会随页面刷新被清空，看似创建失败。
• 循环创建子div时重复设置了相同的idcolumn，违反HTML id全局唯一的规范，容易引发样式匹配、DOM操作异常。
• CSS使用id选择器div#column匹配子div，存在多个相同id元素时部分浏览器会出现样式匹配失败的问题，导致子div即使创建成功也看不到。
• 若输入框cavidades或sementes为空，hide_div函数会走到alert分支，不会移除second容器的hidden属性，即便子div创建成功也会被父容器隐藏无法查看。

解决方法 #

1. 阻止按钮默认提交行为，二选一即可：
   • 将按钮的type属性从submit改为button：

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

   • 在点击事件末尾添加return false阻止默认行为：

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

2. 修改createboard函数，移除重复的id赋值，若需要唯一标识可拼接序号：

   function createboard(){
     for(let i=0;i<10;i++){
       let newDiv = document.createElement("div");
       newDiv.className="column";
       // 如需唯一id可启用下一行代码
       // newDiv.id = `column-${i}`;
       document.getElementById("second").appendChild(newDiv);
     }
   }
   

3. 修改CSS选择器，将id选择器改为类选择器匹配子div：

   div.column{
     float: left;
     background-color: green;
     height: 50px;
     width: 50px;
     border: 5px solid yellow;
   }
   

4. 确保触发操作前cavidades和sementes两个输入框都已填入有效内容，保证second容器的hidden属性被正常移除。

内容的提问来源于stack exchange，提问作者Pedro Carvalho