1

这个想法是，当单击按钮时，它将生成与单击次数一样多的框（例如：20 次单击 = 页面上的 20 个框）但是，我需要它，当您单击该框时会弹出一个唯一 ID 的警报. 我不确定如何为每个盒子分配一个唯一的 ID ...

这是HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>E02W03_Q2</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="E03_Q2.css">
        <script src="E03_Q2.js"></script>
    </head>
    <body>
        <form>
            <input type="button" id="addButton" value="Add Box">
        </form>
        <div class="clrBox">

        </div>
    </body>
</html>

CSS 代码：

.clrBox { 
    background-color: red;
    width: 50px;
    height: 50px;
    margin: 10px;
}

JavaScript 代码：

window.onload = init;

function init() {
    var button = document.getElementById("addButton");
    var box = document.getElementByTagName("div");
    button.onclick = handleButtonClick;
    box.onclick = handelBoxClick;
}

function handleButtonClick(e) { 
    var div = document.createElement("div");
    div.setAttribute("class","clrBox");
    var body = document.getElementsByTagName("body");
    body[0].appendChild(div);
}

function handelBoxClick(e){ <<This isnt quite finished yet since i'm not sure of how to assign each box a unique id...
    var div = document.getElementById("");
    alert();

}
4

6 回答 6

1

如果我理解你的问题，这就是你需要做的。在handleButtonClick：

var div = document.createElement("div");
div.setAttribute("class","clrBox");
div.id = "some_id"; // probably something auto-generated, remember that it needs to be unique!

很简单。

于 2013-09-27T20:30:40.897 回答
1

尝试

var count = document.getElementsByTagName('div').length;
div.id = 'b' + (count + 1);
于 2013-09-27T20:33:14.153 回答
1

这应该这样做：

function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}

var i=0;
function handleButtonClick() { 
   i++;
    var div = document.createElement("div");
    div.setAttribute("class","clrBox");
    div.setAttribute("id","box"+i);
    div.onclick=function(){handleBoxClick(div);}
    var body = document.getElementsByTagName("body");
    body[0].appendChild(div);
 }

http://jsfiddle.net/kBMeJ/

于 2013-09-27T20:45:36.447 回答
0

您可以使用容器的长度属性为id每个 div 分配一个增量。

function handleButtonClick(e) { 
    var container = document.getElementsByClassName("clrBox")[0];
    var div = document.createElement("div");

    // Increment id
    div.id = "box-" + container.getElementsByTagName("div").length;
    container.appendChild(div);
}

http://jsfiddle.net/pA9QG/

那是你要找的吗？

于 2013-09-27T20:36:41.897 回答
0

在您的初始化处理程序中运行它（jsFiddle 在加载时执行它）：http: //jsfiddle.net/8sWgF/

document.getElementById("addButton").onclick = (function() {
    var count = 0;
    var addBox = function() {
        var div = document.createElement("div");
        div.setAttribute("class","clrBox");
        div.id = "clrBox" + count++;
        div.onclick = function() {
            alert(this.id);
        }
        document.getElementsByTagName("body")[0].appendChild(div);
    };
    return addBox;
})();
于 2013-09-27T20:50:45.477 回答
-1

如果你使用 jQuery：

将函数绑定到事件：

$(document).on('click', 'input#addButton', addBox);

功能：

function addBox() { 
var newId=$('div.clrBox').length + 1;
var $newBox=$('<div id="'+ newId +'"></div>')
    .addClass("clrBox")
)

$('body').append($newBox);
}
于 2013-09-27T20:30:54.553 回答