在对象构造器onclick事件中创建的HTML按钮不起作用

Question

所以导致错误的原因一定在这个循环中:通过调用gridBox构造函数来创建一个box。但是那些由buildField函数创建的不会返回on click事件。

var grid = [];
function buildField(size){
    //loops through each row
    for(var y=0; y<size;y++){
        //loops through each column
        grid[y]=[];
        for(var x=0; x<size; x++){
            //create new object for grid
            grid[y][x] = new gridBox(x,y); 
        }
        document.getElementById("board").innerHTML += "<br>";
    }
}
function gridBox(x,y){
    this.x=x;
    this.y=y;
    var me = this;
    //function to create and add button.
    function makeBtn(){
        var btn = document.createElement("BUTTON");
        btn.type = "BUTTON";
        btn.className = "gridButton";
        btn.value = "BUTTON";
        btn.name = me;
        btn.onclick = function(){
            console.log("click");
        };
        document.getElementById("board").appendChild(btn);
        console.log("madeButton");
    }
    makeBtn();
}

Answer 1

document.getElementById("board").innerHTML += "<br>";

这将:

1. 将DOM转换为HTML
2. 添加<br>到HTML
3. 将HTML转换为DOM
4. 用
覆盖现有的DOM

…onclick事件处理程序将不是序列化HTML的一部分，因此在步骤4发生时它们将丢失。

再次使用createElement和appendChild。不要使用innerHTML

Answer 2

这是为我工作:

function gridBox(x,y){
    this.x=x;
    this.y=y;
    var me = this;
    //function to create and add button.
    function makeBtn(){
        var btn = document.createElement("BUTTON");
        btn.className = "gridButton";
        btn.textContent = "Click Me";
        btn.name = me;
        btn.onclick = function(){
            console.log("click");
        };
        document.getElementById("board").appendChild(btn);
        console.log("madeButton");
    }
    makeBtn();
}
gridBox(10,10);

.gridButton {
  height:30px;
  width:100px;
}

<div id=board></div>

Answer 3

尝试在document后面添加btn.onClick .appendChild(..):

function gridBox(x,y){
    this.x=x;
    this.y=y;
    var me = this;
    //function to create and add button.
    function makeBtn(){
        var btn = document.createElement("BUTTON");
        btn.type = "BUTTON";
        btn.className = "gridButton";
        btn.value = "BUTTON";
        btn.name = me;
        document.getElementById("board").appendChild(btn);
        btn.onclick = function(){
            console.log("click");
        };
        console.log("madeButton");
    }
    makeBtn();
}
// make simple button
gridBox(10,10);

<div id="board">
  
</div>

Answer 4

Try with:

btn.addEventListener('click', function(){ });

而不是btn。onclick