Javascript 如何使用onclick事件创建多个框

单击

onclick

，我需要生成具有唯一ID和随机位置的多个框

这是我的：

神奇盒子应用程序
为你的神奇盒子选一个名字：

姓名：

为你的神奇盒子挑选一种颜色：

挑选颜色
红色
橙色
黄色的
绿色
蓝色
靛蓝
紫罗兰色

您想创建多少个神奇的盒子？

5

10

15

---

我正在寻找一个javascript唯一的解决方案

要生成，您需要使用div“scene”或任何其他希望使用的空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.
}

函数生成器框（num，color）{
ClearBox（）；//首先清除它们
对于（var i=0；我你试过什么？我的意思是，这是你的家庭作业，你必须从中学到一些东西。这对stackoverflow不起作用！@Christopher，你需要的是，点击后，你应该能够生成3个你刚刚编号的框，并且所有框都必须有唯一的ID和位置。这是我迄今为止所做的努力：如果用户选择带编号的按钮5，然后必须生成5个所选颜色的框，每个框都有唯一的ID和位置。如果他想添加更多框，那么他可以轻松地继续操作，并且之前生成的框不会被删除。嗨，Scott。我将编辑我的代码并让您知道它是如何工作的。谢谢您的时间。
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.
}