Question

我有两个按钮。我用它们来添加/删除'main'标签中的div（class="rect"）。我希望能够在点击它时更改每个div的背景颜色。我设法为我在第一次加载页面时创建的所有div执行此操作，但该函数不适用于我添加的新div。我知道这是因为在我的代码中，函数在onload中，但是当我把它取出时它不起作用。有什么帮助吗？

HTML：

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

这是我最后一次尝试：

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;
        var rectangles = document.getElementsByClassName('rect');
        for(var i = 0; i < rectangles.length; i++) {
            var rectangle = rectangles[i];
                rectangle.onclick = function() {
                    this.style.backgroundColor = "red";
                }
            }
    }


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

Answer 1

感谢回复......我终于通过以下更改解决了这个问题：

window.onload=function(){
    for(var i=0;i<6;i++){
            var div = document.createElement("div");
            div.className = "rect";
            document.getElementById("main").appendChild(div);
        }
        document.getElementById("add").onclick = addRect;
        document.getElementById("remove").onclick = removeRect;
    }

window.onclick = function func(){var rectangles = document.getElementsByClassName('rect');
        for(var i = 0; i < rectangles.length; i++) {
            var rectangle = rectangles[i];
                rectangle.onclick = function() {
                    this.style.backgroundColor = "red";
                }
            }
    }

Answer 2

请使用活动委派

将一个事件监听器添加到包含rects的父元素，然后使用 event.target 来获取被点击的实际矩形

var rectHolder = document.getElementById('main');

rectHolder.addEventListener('click', function(event){
  var rectClicked = event.target;
  rectClicked.style.backgroundColor = 'red';
});

如何为页面加载后动态添加的元素分配函数？

2 个答案: