HTML-Button erstellt in Objektkonstruktoren onclick -Ereignis funktioniert nicht

Question

Also was auch immer den Fehler verursacht muss tatsächlich in dieser Schleife sein: Erstellen einer Box durch Aufrufen des GridBox-Konstruktors auf eigene Arbeit. Die von der buildField-Funktion erstellten Objekte geben jedoch kein On-Click-Ereignis zurück.

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

Dies wird:

1. Convert das DOM zu HTML
2. hinzufügen <br> zu diesem HTML
3. , dass HTML-DOM Convert
4. die bestehende DOM Überschreiben mit diesem

... die onclick Event-Handler nicht Teil der serialisierten HTML sein wird, so wird sie verloren, wenn Schritt 4 passiert.

Verwenden Sie erneut createElement und appendChild. Verwenden Sie nicht innerHTML.

Answer 2

Versuchen mit:

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

statt Ihrer btn.onclick

Answer 3

Dies ist für mich arbeiten:

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 4

Versuchen Sie btn.onClick nach Dokument ... appendChild (..): das funktioniert für mich

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>