Javascript 如何更改动态创建的div'；你的背景是什么？_Javascript_Html

Javascript 如何更改动态创建的div'；你的背景是什么？

javascript html

Javascript 如何更改动态创建的div'；你的背景是什么？,javascript,html,Javascript,Html,我使用我创建的两个按钮在“main”标记中添加和删除div。我想改变每一个div的背景颜色点击，但没有任何工作…为什么呢这是我的密码 <body> <div id="wrapper"> <header> </header> <div id="buttonscontainer"> <button class="button" id="add">

我使用我创建的两个按钮在“main”标记中添加和删除div。我想改变每一个div的背景颜色点击，但没有任何工作…为什么呢

这是我的密码

<body>
    <div id="wrapper">
        <header>
        </header>

        <div id="buttonscontainer">
            <button class="button" id="add">+</button>  
            <button class="button" id="remove">-</button>   
        </div>

        <main id="main">
        </main>
    </div>      
</body>


+  
-

脚本：

window.onload=function(){
    for(var i=0;i<6;i++){
            var rectangle = '<div class="rect"></div>';
            document.getElementById("main").innerHTML += rectangle;
        }
    document.getElementById("add").onclick = addRect;
    document.getElementById("remove").onclick = removeRect;
    }

/*defines the behaviour of the addRect onclick*/
 function addRect(){
     var rectangle = '<div class="rect"></div>';
     document.getElementById("main").innerHTML += rectangle;
 }

 /*defines the behaviour of the removeRect onclick*/
 function removeRect(){
     var rectangle = '<div class="rect"></div>';
     document.getElementById("main").lastChild.remove();
 }

window.onload=function（）{
对于（var i=0；i给定您已经拥有的，您可以这样做：
window.onload=function(){
    for(var i=0;i<6;i++){
        //just make use of addRect here, no need to duplicate code
        addRect();
    }
}

//Update addRect to add elements in a more DOM like manner,
//so we don't clear previously bound events
function addRect(){
    var rectangle = document.createElement('div');
    rectangle.className = 'rect';
    document.getElementById("main").appendChild(rectangle);
    document.getElementById("main").lastChild.onclick = changeColour;
}

function changeColour() {
    this.style.backgroundColor = '#ff0000';
}

window.onload=function（）{
对于（var i=0；i您的代码中没有css。您希望如何更改bg颜色？
代码运行正常，您正在添加零高度矩形。
您应该使用chrome开发工具来查看更改。
您用于更改背景颜色的代码在哪里？如果您不向我们展示JavaScript，我们应该如何帮助您更正它？我尝试了类似的方法，但它只允许我更改最后一个孩子的背景，但我需要的是能够更改每个孩子的背景单击时div的背景it@Adam我错过了您最初的for
循环-将进行编辑，但这应该允许单击任何div，而不仅仅是最后一个子项。我们只是在创建时绑定到最后一个子项的click
事件，而不是只在最后一个子项上工作child@Adam抱歉，看起来通过innerHTML
进行设置会清除所有以前绑定的事件处理程序，因此这不起作用。我认为css与我的问题无关，但如果有帮助，下面是css类：.rect{width:420px；height:200px；background:#ffffff；border:1px solid；float:left；margin left:56px；margin bottom:10px；}我的意思是我看不到你改变矩形颜色的部分。我不明白你没有。