Add onclick Ereignis zu einzelnen divs in Schleife

Ich mache ein Tic-Tac-Toe-Spiel. Ich würde gerne jedem einzelnen div ein individuelles onclick -Ereignis hinzufügen, so dass ich entweder ein "X" oder ein "O" hinzufügen kann, je nachdem, auf welches div ich klicke. "O" wird später hinzugefügt.Add onclick Ereignis zu einzelnen divs in Schleife

JavaScript:

function createDivs() { 
    for (i = 0; i < 9; i++) { 
    var d = document.createElement("DIV"); 
    document.body.appendChild(d); 

    //Stuck here -borrowed some of this from a similar topic-  
    d.onclick = function() { 
     return function() { 
     var p = document.createElement("P"); 
     var x = document.createTextNode("X"); 
     p.appendChild(x); 
     d.appendChild(p); 
     } 
    }(i); 
    //------------------------------------------------- 

    var ii = document.createAttribute("id"); 
    ii.value = "D" + i; 
    d.setAttributeNode(ii); 
    var z = "D" + i; 
    if (i == 3 || i == 6) { 
     document.getElementById(z).style.clear = "left"; 
    } 
    } 
}

html: <body onload="createDivs()">

Quelle

2016-07-09 HYUTS

Pass d als Argument und es als Argument akzeptieren, so dass Schließung wird es merken, wenn click Handler-Funktion ausgeführt wird.

d ist nichts anderes als die element Sie erstellen (var d = document.createElement("DIV");)

function createDivs() { 
 
    for (i = 0; i < 9; i++) { 
 
    var d = document.createElement("DIV"); 
 
    d.style.float = 'left'; 
 
    document.body.appendChild(d); 
 
    d.onclick = function(d) { 
 
     //----------------^^^ Accept d here 
 
     return function() { 
 
     var p = document.createElement("P"); 
 
     var x = document.createTextNode("X"); 
 
     p.appendChild(x); 
 
     d.appendChild(p); 
 
     d.onclick = function() {}; //Unset function after click event 
 
     } 
 
    }(d); 
 
    //^^ Pass d here 
 
    var ii = document.createAttribute("id"); 
 
    ii.value = "D" + i; 
 
    d.setAttributeNode(ii); 
 
    var z = "D" + i; 
 
    if (i == 3 || i == 6) { 
 
     document.getElementById(z).style.clear = "left"; 
 
    } 
 
    } 
 
}

div { 
 
    width: 30px; 
 
    height: 30px; 
 
    border: 1px solid black; 
 
}

<body onload="createDivs()">

Update: Wie Barmar von vorgeschlagen in den Kommentaren, Wert der this in der event-handler Funktion wird sei das Element, auf dem sich das Ereignis registriert hat.

function createDivs() { 
 
    for (i = 0; i < 9; i++) { 
 
    var d = document.createElement("DIV"); 
 
    d.style.float = 'left'; 
 
    document.body.appendChild(d); 
 
    d.onclick = function() { 
 
     var p = document.createElement("P"); 
 
     var x = document.createTextNode("X"); 
 
     p.appendChild(x); 
 
     this.appendChild(p); 
 
     this.onclick = function() {}; //Unset function after click event 
 
    }; 
 
    var ii = document.createAttribute("id"); 
 
    ii.value = "D" + i; 
 
    d.setAttributeNode(ii); 
 
    var z = "D" + i; 
 
    if (i == 3 || i == 6) { 
 
     document.getElementById(z).style.clear = "left"; 
 
    } 
 
    } 
 
}

div { 
 
    width: 30px; 
 
    height: 30px; 
 
    border: 1px solid black; 
 
}

<body onload="createDivs()">

Quelle

2016-07-09 08:08:56 Rayon

Das schätzen Ihre Zeit gearbeitet! Entschuldigung, ich habe mein CSS ausgelassen. Ich weiß ehrlich nicht, was das (d) nach der Funktion macht. – HYUTS

@HYUTS - Ich habe es aktualisiert .. Ich bin froh, dass es Mate geholfen hat! _Happy Coding_ – Rayon

Kannst du nicht 'this' in der Funktion verwenden, um auf das Ziel des Ereignisses zu verweisen? – Barmar

Add onclick Ereignis zu einzelnen divs in Schleife

Antwort

Verwandte Themen