1

アイデアは、ボタンがクリックされると、クリックされたのと同じ数のボックスが生成されるということです (例: 20 回のクリック = ページ上の 20 個のボックス)。 . 各ボックスに一意の 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

試す

var count = document.getElementsByTagName('div').length;
div.id = 'b' + (count + 1);
于 2013-09-27T20:33:14.153 に答える
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

これはそれを行う必要があります：

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コンテナの length プロパティを使用して、インクリメントされた を各 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 に答える
-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 に答える