ループ内の個々のdivにonclickイベントを追加します。

私はチック・タック・トゥ・ゲームを作っています。個々のonclickイベントを各divに追加して、クリックするdivに応じて「X」または「O」のいずれかを追加できます。 "O"は後で追加されます。ループ内の個々のdivにonclickイベントを追加します。

は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()">

出典

2016-07-09 HYUTS

引数として渡すdとclickハンドラ関数が実行されるときに閉鎖がそれを覚えていますので、引数としてそれを受け入れます。

dはelement作成している（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()">

アップデート以外の何ものでもありません：event-handler機能のコメントでBarmarによって示唆されるように、thisの価値ますイベントが登録された要素です。あなたの時間を感謝働い

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()">

出典

2016-07-09 08:08:56 Rayon

！申し訳ありません、私は私のCSSを捨てました。私は正直なところ、（d）機能が何をしているのか分からない。 – HYUTS

@HYUTS - 私はそれを更新しました..私はそれが仲間を助けてうれしいです！ _Happy Coding_ – Rayon

関数の 'this'をイベントのターゲットを参照するのに使えませんか？ – Barmar

ループ内の個々のdivにonclickイベントを追加します。

答えて

関連する問題