まるばつゲームのリセットボタンを作りたい<javascript>

まるばつゲームを作っています。
ゲームを途中or最後にリセットするリセットボタンを作りたいのですが、うまく機能きません。

やったこと①
リセットボタンにfunction init()を入れた。
リセットボタンを押すと、初期状態の3×3のマスが現状のものに追加されてしまう。
現状のマスを削除してから追加する必要があると感じる。

javascript
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3
4  <head>
5    
6    <meta charset="utf-8">
7    
8    <title>まるばつゲーム</title>
9    
10    <style>
11      table{
12        border-collapse: collapse;
13      }
14      tr{
15        border:1px solid #ccc;
16        border-collapse: collapse;
17      }
18      td.cell{
19        border:1px solid #ccc;
20        width:25px;
21        height:25px;
22        border-collapse: collapse;
23        background:#eee;
24        text-align:center;
25        vertical-align:middle;
26      }
27    </style>
28    
29    <script>
30      "use strict"
31
32      function init(){
33        var table = document.getElementById("table");
34        
35        for(var y = 0; y < 3; y++){
36          var tr = document.createElement("tr");
37          table.appendChild(tr);
38
39          for(var x = 0; x < 3; x++){
40            var td = document.createElement("td");
41            td.className = "cell"
42            td.textContent = "";
43            td.onclick = draw;
44            tr.appendChild(td);
45          }
46        }
47      }
48
49      var count = "0";
50
51      function draw(e){
52        if(this.textContent == ""){
53          if(count++ % 2 == 0){
54            this.textContent = "◯"
55            console.log(count);
56          }else{
57            this.textContent = "×"
58            console.log(count);
59          }
60        }
61      }
62
63    </script>
64    
65  </head>
66  
67  <body onload="init()">
68    
69    <table id="table">
70    </table>
71    
72    <button onclick="init()">
73      リセット
74    </button>
75    
76  </body>
77  
78</html>
79

やったこと②
リセットボタンに下記関数を入れ、マス目の文字を空にすることを試みた。
しかし、マス目を追加している箇所がローカル変数のため、機能せず。

javascript
1      function reset(){
2        td.textContent = "";
3      }
4
5    <button onclick="reset()">
6      リセット
7    </button>

上記のそれぞれの方法で解決策を知りたいです。

ヒントでも結構ですので、ご教授よろしくお願い申し上げます。

行動規範の内容に同意します

回答1件

ベストアンサー

じゃあヒントだけ。

①の方法で使っているdocument.createElementは新しい要素を作成するメソッドです。appendChildは要素を追加するメソッドです。そこがわかれば①でなぜそのような動きになるのかわかるはずです。

②は、その関数内で操作したい要素を取得するという行為が必要です。

以上のヒントから、MDNや各種入門記事等をググって考えてみて下さい。

投稿2019/07/06 16:20

gentaro

総合スコア8949

k373

2019/07/06 16:25

早速のアドバイスありがとうございます。 ①init()の際に、既存のマスを一回削除してからできれば可能かと考え、ググっていただのですがっまだ回答にたどり着けていないところです。引き続きググります！ ②要素を取得する方法をググっていたのですが、document.createElementがグローバル変数として扱えなかったので、どうしたらいけるか考えております。引き続き頑張ります。ありがとうございます！

gentaro

2019/07/06 16:28

①については、「要素を削除する」という方法を調べる必要があります。 ②については、document.createElementは関係ありません。documentのメソッドのうち、「現在表示されている要素の中から指定したものを取得する」ことができれば、その中身をクリアするだけです。

k373

2019/07/06 17:07

① var table = document.getElementById("table"); while(table.lastChild){ table.removeChild(table.lastChild); } もしくは、 var table = document.getElementById("table"); table.innerHTML = ""; で解決いたしました！ ② function reset(){ count = "0"; var table = document.getElementById('table'); var td = table.getElementsByTagName('td'); for(var i = 0; i <9; i++){ td[i].textContent = ""; } } <button onclick="reset()"> リセット </button> で解決いたしました！ ②に関しては、textContentやinnerHTMLが一つの要素にしか適応されないことを知らなかったので、そこがつまづいている点でした。ありがとうございました！

行動規範の内容に同意します