javascript - 合并 HTML 代码

Question

http://js.do/code/lightsout5x5

寻找合并此 HTML 的方法:

<button style="height:50px;width:50px" id="s11" onclick="s11()">O</button>
<button style="height:50px;width:50px" id="s12" onclick="s12()">O</button>
<button style="height:50px;width:50px" id="s13" onclick="s13()">O</button>
<button style="height:50px;width:50px" id="s14" onclick="s14()">O</button>
<button style="height:50px;width:50px" id="s15" onclick="s15()">O</button><br>
<button style="height:50px;width:50px" id="s21" onclick="s21()">O</button>
<button style="height:50px;width:50px" id="s22" onclick="s22()">O</button>
<button style="height:50px;width:50px" id="s23" onclick="s23()">O</button>
<button style="height:50px;width:50px" id="s24" onclick="s24()">O</button>
<button style="height:50px;width:50px" id="s25" onclick="s25()">O</button><br>
<button style="height:50px;width:50px" id="s31" onclick="s31()">O</button>
<button style="height:50px;width:50px" id="s32" onclick="s32()">O</button>
<button style="height:50px;width:50px" id="s33" onclick="s33()">O</button>
<button style="height:50px;width:50px" id="s34" onclick="s34()">O</button>
<button style="height:50px;width:50px" id="s35" onclick="s35()">O</button><br>
<button style="height:50px;width:50px" id="s41" onclick="s41()">O</button>
<button style="height:50px;width:50px" id="s42" onclick="s42()">O</button>
<button style="height:50px;width:50px" id="s43" onclick="s43()">O</button>
<button style="height:50px;width:50px" id="s44" onclick="s44()">O</button>
<button style="height:50px;width:50px" id="s45" onclick="s45()">O</button><br>
<button style="height:50px;width:50px" id="s51" onclick="s51()">O</button>
<button style="height:50px;width:50px" id="s52" onclick="s52()">O</button>
<button style="height:50px;width:50px" id="s53" onclick="s53()">O</button>
<button style="height:50px;width:50px" id="s54" onclick="s54()">O</button>
<button style="height:50px;width:50px" id="s55" onclick="s55()">O</button><br>

为熄灯程序制作一个 5x5 的正方形

考虑将其设为 9x9，但会使代码变成 81 行而不是 25 行。有什么方法可以合并 HTML？

Answer 1

你需要从一个循环开始然后将您的函数更改为传递按钮的一个函数 - 您可以从中访问它的 ID。

function clicked(but) {
  var color = but.classList.contains("blue")?"blue":"red";
  but.classList.toggle("blue");
  but.classList.toggle("red");
  console.log("You clicked button "+but.id, "color:"+color);
}
var gridSize = 9, buttons=[], array_of_ids=[];
for (var i=1;i<=gridSize;i++) {
  for (var j=1;j<=gridSize;j++) {
    id = 's'+i+''+j;
    buttons.push('<button type="button" onclick="clicked(this)" id="'+id+'" class="but blue">&nbsp;</button>');
    array_of_ids.push(id);
    if (j==gridSize) buttons.push('<br/>');
  }  
}
document.querySelector("#container").innerHTML=buttons.join("")

.but {height:50px;width:50px;}
.blue {background-color:blue}
.red {background-color:red}

<div id="container"></div>