onclick関数のJavascript

Question

私は戦艦ゲームを作成してスクリプトを練習しようとしています。見られるようにhere。

私は現在ボードを2Dにしようとしています。私はボードを作るためにfor-loopを作ることができましたが、テスト目的のためにボードを作ろうとしていて、正方形をクリックすると赤くなります...しかし、常に下の四角点灯します。私はcの値をnullにすることによってそれをデバッグしようとしましたが、動作を停止します。私はcの値を適切に保存していないことを知っていますが、これを修正する方法が不思議です。

私は自分自身で100の正方形を作っていなければなりませんか、それとも実際にスクリプトを作ってもいいですか？

maincansize = 400; 
 
document.getElementById("Main-Canvas").style.height = maincansize; 
 
document.getElementById("Main-Canvas").style.width = maincansize; 
 
document.getElementById("Main-Canvas").style.position = "relative"; 
 
var ize = maincansize * .1; 
 
for (var a = 0; a < 10; a++) { 
 
    for (var b = 0; b < 10; b++) { 
 
    var c = document.createElement("div"); 
 
    var d = c; 
 
    c.onclick = function() { 
 
     myFunction() 
 
    }; 
 
    function myFunction() { 
 
     console.log("A square was clicked..." + c.style.top); d.style.backgroundColor = "red"; 
 
    } 
 
    c.style.height = ize; 
 
    c.style.width = ize; 
 
    c.style.left = b * ize; 
 
    c.style.top = a * ize; 
 
    c.style.borderColor = "green"; 
 
    c.style.borderStyle = "outset"; 
 
    c.style.position = "absolute"; 
 
    console.log(ize); 
 
    document.getElementById('Main-Canvas').appendChild(c); 
 

 
    } //document.getElementById('Main-Canvas').innerHTML+="<br>"; 
 
}

#Main-Canvas { 
 
    background-color: #DDDDDD; 
 
}

<div> 
 
    <div id="header"></div> 
 
    <script src="HeaderScript.js"></script> 
 
</div> 
 
<div id="Main-Canvas" style="height:400;width:400;"> 
 

 
</div>

Answer 1

ここではいくつかの修正をあなたのコードです：

1. がmyFunction

var maincansize = 400; 
 
document.getElementById("Main-Canvas").style.height = maincansize; 
 
document.getElementById("Main-Canvas").style.width = maincansize; 
 
document.getElementById("Main-Canvas").style.position = "relative"; 
 
var ize = maincansize * .1; 
 

 
for (var a = 0; a < 10; a++) { 
 
    for (var b = 0; b < 10; b++) { 
 
    var c = document.createElement("div"); 
 
    c.onclick = function(ev) { 
 
     myFunction(ev.currentTarget); 
 
    }; 
 

 
    function myFunction(el) { 
 
     console.log("A square was clicked..."); 
 
     el.style.backgroundColor = "red"; 
 
    } 
 
    c.style.height = ize+'px'; 
 
    c.style.width = ize+'px'; 
 
    c.style.left = (b * ize)+'px'; 
 
    c.style.top = (a * ize)+'px'; 
 
    c.style.borderColor = "green"; 
 
    c.style.borderStyle = "outset"; 
 
    c.style.position = "absolute"; 
 
    document.getElementById('Main-Canvas').appendChild(c); 
 
    } 
 
}

#Main-Canvas { 
 
    background-color: #DDDDDD; 
 
}

<div id="Main-Canvas" style="height:400;width:400;"> 
 

 
</div>

にクリックされた要素を渡すスタイルの割り当て

に 'PX' を追加

Answer 2

ここでは、大きな改善がなされた解決策があります。ボードセルのコンテナエレメントに設定された幅を使用しているので、セルを浮動させることができ、それらは次のラインにラップされます。絶対的なポジショニングはちょっとしたものです。あなたは、行ごとに10件のアイテムが必要な場合、それは同じくらい簡単です：ドキュメントフラグメントを使用して

<container width>/<items per row> = <width>

実際のDOMへの時点で個々の要素1を追加するよりも高速です。代わりに、追加するまで、DOMの一部ではないドキュメントフラグメントに要素を追加します。この方法で、100ではなくすべてのセルに対して1つの挿入を行います。

スタイリングの一部をCSSに移動しましたが、本当に必要な場合は簡単にJSに戻すことができます。

function onCellClick() { 
 
    
 
    this.style.backgroundColor = 'red'; 
 
    
 
    console.log('selected'); 
 
    
 
} 
 

 
var main = document.getElementById('board'), 
 
    frag = document.createDocumentFragment(), 
 
    i = 0, 
 
    len = 100; 
 

 
for (; i < len; i++) { 
 

 
    div = document.createElement('div'); 
 
    
 
    div.addEventListener('click', onCellClick, false); 
 
    frag.appendChild(div); 
 
    
 
} 
 

 
main.appendChild(frag);

#board { 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#board div { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid #ccc; 
 
}

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