如何使用onclick事件創建多個框

Question

根據onclick，我需要生成具有唯一ID和隨機位置的多個框。

這裏是我的effort so far：

<h1>The Amazing Box App</h1> 
<form id="data"> 
<ol> 
<li>Pick a name for your Amazing Box: <br> 
<label for="name">Name: </label> 
<input type="text" id="name" size="20" placeholder="My Amazing Box .."> 
</li> 
<li>Pick a color for your Amazing Box: <br> 
<select id="color"> 
<option value="">Pick a color</option> 
<option value="red">Red</option> 
<option value="orange">Orange</option> 
<option value="yellow">Yellow</option> 
<option value="green">Green</option> 
<option value="blue">Blue</option> 
<option value="indigo">Indigo</option> 
<option value="violet">Violet</option> 
</select> 
</li> 
<li>How many Amazing Boxes do you want to create?<br> 
<input type="radio" id="five" name="amount" value="5"> 
<label for="five">5</label><br> 
<input type="radio" id="ten" name="amount" value="10"> 
<label for="ten">10</label><br> 
<input type="radio" id="fifteen" name="amount" value="15"> 
<label for="fifteen">15</label><br> 
</li> 
</ol> 
<p> 
<input type="button" id="generateButton" value="Generate My Amazing Boxes"> 
<input type="button" id="clearButton" value="Clear My Amazing Boxes"> 
</p> 
</form> 
<div id="scene"> 
</div> 

我要尋找一個JavaScript唯一的解決辦法。

Answer 1

要生成，您需要使用div「場景」或任何其他您希望使用的空div標記。

的功能必須是類似以下內容：

function generateboxes(num, color) { 
    clearboxes(); //first clear them 
    for (var i=0; i<num; i++) { 
     var top = Math.floor(Math.random()*300); //300 is the max vertical offset 
     var left = Math.floor(Math.random()*200); //200 is the max horizontal offset 
     var boxstyle = "position:absolute; top:"+top+"px; left:"+left+"px; background-color:"+color+";"; //Definition of box styles (you must set width and height for them to be visible) 
     document.getElementById('scene').innerHTML += "<div style=\""+boxstyle+"\"></div>"; //Add one more box to the group 
    } 

function clearboxes() { 
    document.getElementById('scene').innerHTML = ""; //By resetting the HTML of the div, we remove the boxes. 
} 

另外，不要忘了功能參數 - 和你需要閱讀的評論可見箱。