Question

这个想法是，当点击按钮时，它会生成与点击一样多的框（例如：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();

}

Answer 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!

非常简单。

Answer 2

尝试

var count = document.getElementsByTagName('div').length;
div.id = 'b' + (count + 1);

Answer 3

这应该这样做：

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/

Answer 4

您可以使用容器的length属性为每个div指定递增的id。

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/

那是你在找什么？

Answer 5

在你的init处理程序中运行它（jsFiddle执行它onLoad）： 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;
})();

Answer 6

如果你使用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);
}

给一个盒子一个ID，一旦点击显示该ID的警告？

6 个答案: