javascript - 给一个盒子一个 ID,点击后显示该 ID 的警报?

标签 javascript html css

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

}

最佳答案

应该这样做:

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/

关于javascript - 给一个盒子一个 ID,点击后显示该 ID 的警报?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19059451/

相关文章:

php - Codeigniter 查看 PDF

css - 如何使文本与图像右对齐?

javascript - "show more"<h :commandButton> with ajax

javascript - 单击 Javascript 中的按钮时更改文本颜色

javascript - 仅使用 CSS 关闭模式

HTML 表格根据条件更改文本颜色

jquery - 背景图像平移,背景大小为 : cover?

javascript - cordova.file 未为 windows/wp8 定义

javascript - 使用 CoffeeScript 从对象数组中选择一个字段

php - 将 HTML 表数据添加到 MySQL 数据库中