QiitaでのQ&Aに2回ほど助けられましたが、それ以外すべて自力で作りました。
今後コードの簡略化と勝敗の判定の追加に励みます。
アドバイスやご意見等お待ちしております。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>まるばつゲーム</title>
<style>
#gameTable {
width: 100px;
height: 100px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h1>まるばつゲーム</h1>
<p id="inputWhich"> </p>
<br>
<div id="field">
</div>
<script>
let tx = "〇";
document.getElementById("inputWhich").innerText = tx + " の番";
const inputMark=(e)=>{
if(e.target.innerText==""){
e.target.innerText = tx;
if(tx=="〇"){
tx = "✕";
}else if(tx=="✕"){
tx = "〇";
}
}else{
alert("そのマスは既に埋まっています。");
}
document.getElementById("inputWhich").innerText = tx + " の番";
}
let i, j;
let tbl = document.createElement("table");
tbl.border="1";
tbl.className="gameTable";
for(i=0;i<=2;i++){
let tr = document.createElement("tr");
for(j=0;j<=2;j++){
let td = document.createElement("td");
td.id="cell"+i+j;
td.onclick=inputMark;
td.height="50px";
td.width="50px";
tr.appendChild(td);
}
tbl.appendChild(tr);
}
document.getElementById("field").appendChild(tbl);
</script>
</body>
</html>