Question

我正在尝试通过制作战舰游戏练习我的脚本。正如here所见。

我正在尝试制作2D电路板。我能够制作一个for循环以制作电路板，但是，由于测试目的，我只是试图制作电路板，点击一个正方形后，它变成红色......但是，底部正方形总是点亮。我尝试通过使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

以下是您的代码，其中包含一些修复：

将“px”添加到样式作业
将点击的元素传递给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>

Answer 2

这是一个重大改进的解决方案。由于您正在使用板单元的容器元素的设置宽度，您可以浮动单元格，它们将换行到下一行。绝对定位往往是一个bugger。如果你想要每行10个项目，那就很简单：

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

使用文档片段比将每个单独的元素一次附加到实际DOM更快。相反，您将元素附加到不是DOM的一部分的文档片段，直到您追加它为止。这样，您可以为所有单元格执行单个插入，而不是100。

我将一些样式移动到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>

用于onclick功能的Javascript

2 个答案: