Javascript 给一个框一个ID，一旦点击就会显示该ID的警报？_Javascript_Html_Css

Javascript 给一个框一个ID，一旦点击就会显示该ID的警报？

javascript html css

Javascript 给一个框一个ID，一旦点击就会显示该ID的警报？,javascript,html,css,Javascript,Html,Css,这个想法是当点击按钮时，它将生成与点击次数相同的框（例如：20次点击=页面上的20个框），但是，我需要它，当你点击框时，会弹出一个唯一ID的警报。我不知道如何给每个盒子分配一个唯一的ID 以下是HTML代码： <!DOCTYPE html> <html> <head> <title>E02W03_Q2</title> <meta charset="UTF-8"> <

这个想法是当点击按钮时，它将生成与点击次数相同的框（例如：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>

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();

}

window.onload=init；
函数init（）{
var button=document.getElementById（“addButton”）；
变量框=document.getElementByTagName（“div”）；
button.onclick=把手按钮onclick；
box.onclick=handelBoxClick；
}
功能手柄按钮点击（e）{
var div=document.createElement（“div”）；
div.setAttribute（“类”、“clrBox”）；
var body=document.getElementsByTagName（“body”）；
正文[0]。追加子项（div）；
}
函数handleboxclick（e）{如果我理解你的问题，这就是你需要做的。在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!

非常简单。
如果使用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);
}

函数addBox（）{
var newId=$（'div.clrBox'）。长度+1；
变量$newBox=$（''）
.addClass（“clrBox”）
)
$（'body'）。追加（$newBox）；
}
试试看
您可以使用容器的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);
}


这就是你想要的吗？
这应该可以：
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);
 }

在init处理程序中运行此命令（JSFIDLE在加载时执行）：

box.onclick=handleBoxClick；
应该是box.onclick=handleBoxClick；
与您的问题并没有太大关系，但要记住一点。您是否愿意使用jQuery来处理它？@Blaise jQuery不能被很遗憾地使用。@Bucky24谢谢您！现在我再次查看，我意识到您在函数声明中将其拼写为w所以它实际上并不重要（除了可读性）.Poster已经在评论中指出他们不能使用jQuery.Oops！我只是在发布了这个答案后才看到他的回复。啊，是的，这是有意义的。你到底要如何自动生成字符串值？或者像一个全局变量这样的东西每次加+1会起作用吗？一个全局变量会起作用。或者你可以这样做：div.id='box.'+document.getElementsByClassName（“clrBox”）.length；
div.id='b'+（count++）
@Orlando，我同意。你不知道count++
是指在'b'+…
之前还是之后。它很容易受到bug的影响。@Orlando它不会做同样的事情，并且总是生成相同的id（我假设count
只从div的数量中提取一次，而不是每次单击；每次单击都是如此，好吗？事实上，+1
甚至不是必需的）哦，是的，完全正确……这应该是count=count+1
。但始终避免使用递增运算符（++）
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);
}

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);
 }

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;
})();