4×4の○×ゲーム

以前にも別の枠で似たような質問をさせていただいたのですが解決しなかったので再度質問させていただきます。

以下のプログラムで元の3×3のマスから4×4のマスすることはできたのですがボタンを押しても反応しなくなってしまいました。
どこがおかしいのかわかりません。

  <script>
  try{
  document.addEventListener ('click',function(e){myfunc(e)},true);
  }catch(e){
  document.attachEvent('onclick',function(e){myfunc(e)});
  }
  var cnt=0;
  function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="INPUT" && t.type=="button"){
    if(t.value==""){
      cnt++;
      t.value=cnt%2==1?"○":"×";
      if(cnt>=16){
        alert("引き分け(OKでリセットします)");
        resetFunc(t);
        cnt=0;
      }
    }else if( cnt > 2 ){
      alert("そのマスはすでに選ばれています。");
      }
  }
  if(t.nodeName=="INPUT" && t.type=="reset"){
      cnt=0;
      resetFunc(t);
    }
  }
  function resetFunc(t){
    var f=t.form;
   var a=new Array();
  var j=0;
  for(var i=0;i<f.length;i++){
    if(f[i].type=="button"){
      a[j]=f[i].value;
      j++;
    }
  }
  if(
    (a[0]!=="" && a[0]==a[1] && a[0]==a[2] && a[0]==a[3])||||
    (a[0]!=="" && a[0]==a[5] && a[0]==a[10] && a[0]==a[15])||
    (a[0]!=="" && a[0]==a[4] && a[0]==a[8] && a[0]==a[12])|||
    (a[1]!=="" && a[1]==a[5] && a[1]==a[9] && a[1]==a[13])|||
    (a[2]!=="" && a[2]==a[6] && a[2]==a[10] && a[2]==a[14])||
    (a[3]!=="" && a[3]==a[7] && a[3]==a[11] && a[3]==a[15])||
    (a[3]!=="" && a[3]==a[6] && a[3]==a[9] && a[1]==a[12])|||
    (a[4]!=="" && a[4]==a[5] && a[4]==a[6] && a[4]==a[7])||||
    (a[8]!=="" && a[8]==a[9] && a[8]==a[10] && a[8]==a[11])||
    (a[12]!=="" && a[12]==a[13] && a[12]==a[14] && a[12]==a[15]){
    var val=cnt%2==1?"○":"×";
    alert(val+"の勝ち");
  }
}
function resetFunc(t){
    var f=t.form;
    for(var i=0;i<f.length;i++){
      if(f[i].type=="button") f[i].value="";
    }
  }
  </script>
  </head>
  <form name="tick">
  <table>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
  </table>

  <input type="reset" value="リセット">
  </p>
  </form>
  </body>

＜dateさんからのご指摘をいただいた部分を修正したものになります＞

<script>
  try{
  document.addEventListener ('click',function(e){myfunc(e)},true);
  }catch(e){
  document.attachEvent('onclick',function(e){myfunc(e)});
  }
  var cnt=0;
  function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="INPUT" && t.type=="button"){
    if(t.value==""){
      cnt++;
      t.value=cnt%2==1?"○":"×";
      if(cnt>=16){
        alert("引き分け(OKでリセットします)");
        resetFunc(t);
        cnt=0;
      }
    }else if( cnt > 2 ){
      alert("そのマスはすでに選ばれています。");
      }
  }
  if(t.nodeName=="INPUT" && t.type=="reset"){
      cnt=0;
      resetFunc(t);
    }
  }
  function resetFunc(t){
    var f=t.form;
   var a=new Array();
  var j=0;
  for(var i=0;i<f.length;i++){
    if(f[i].type=="button"){
      a[j]=f[i].value;
      j++;
    }
  }
  if(
    (a[0]!=="" && a[0]==a[1] && a[0]==a[2] && a[0]==a[3])||
    (a[0]!=="" && a[0]==a[5] && a[0]==a[10] && a[0]==a[15])||
    (a[0]!=="" && a[0]==a[4] && a[0]==a[8] && a[0]==a[12])||
    (a[1]!=="" && a[1]==a[5] && a[1]==a[9] && a[1]==a[13])||
    (a[2]!=="" && a[2]==a[6] && a[2]==a[10] && a[2]==a[14])||
    (a[3]!=="" && a[3]==a[7] && a[3]==a[11] && a[3]==a[15])||
    (a[3]!=="" && a[3]==a[6] && a[3]==a[9] && a[1]==a[12])||
    (a[4]!=="" && a[4]==a[5] && a[4]==a[6] && a[4]==a[7])||
    (a[8]!=="" && a[8]==a[9] && a[8]==a[10] && a[8]==a[11])||
    (a[12]!=="" && a[12]==a[13] && a[12]==a[14] && a[12]==a[15])){
    var val=cnt%2==1?"○":"×";
    alert(val+"の勝ち");
  }
}
function resetFunc(t){
    var f=t.form;
    for(var i=0;i<f.length;i++){
      if(f[i].type=="button") f[i].value="";
    }
  }
  </script>
  </head>
  <form name="tick">
  <table>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
  </table>

  <input type="reset" value="リセット">
  </p>
  </form>
  </body>

ご教授、ご指摘の方よろしくお願いします。

kei344

2016/07/25 08:18

出ているエラーを具体的に記述されたほうが回答を得られやすいと思います。

Alpha

2016/07/25 08:31

ボタンを押しても反応しないと一応書いてあるのですが。

kei344

2016/07/25 08:37

デベロッパーツール（http://www.buildinsider.net/web/chromedevtools/01）などで "JavaScript" のエラーを記述されては？ということなのですが。

Alpha

2016/07/25 08:54

なるほど。そういう意味ですか、わかりました。ありがとうございます。見てみます！

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

回答2件

ベストアンサー

if(
(a[0]!=="" && a[0]==a[1] && a[0]==a[2] && a[0]==a[3])||||
あきらかに ||の数がおかしいです、ほかの所も||の数がおかしいので要素の調査のなどを使えばすぐ出てくるので、見てみてください

さらにif文の最後が)で閉じられていないです。

2016/07/26 09:30追記

javascript
1<script>
2  try{
3  document.addEventListener ('click',function(e){myfunc(e)},true);
4  }catch(e){
5  document.attachEvent('onclick',function(e){myfunc(e)});
6  }
7  var cnt=0;
8  function myfunc(e){
9  var t = (e.srcElement || e.target);
10  if(t.nodeName=="INPUT" && t.type=="button"){
11    if(t.value==""){
12      cnt++;
13      t.value=cnt%2==1?"○":"×";
14      
15      if(cnt>=16){
16        alert("引き分け(OKでリセットします)");
17        resetFunc(t);
18        cnt=0;
19      }else{
20    	  Func(t);
21      }
22    }else if( cnt > 2 ){
23      alert("そのマスはすでに選ばれています。");
24      }
25  }
26  if(t.nodeName=="INPUT" && t.type=="reset"){
27      cnt=0;
28      resetFunc(t);
29    }
30  }
31  function Func(t){
32	  
33    var f=t.form;
34   var a=new Array();
35  var j=0;
36  for(var i=0;i<f.length;i++){
37    if(f[i].type=="button"){
38      a[j]=f[i].value;
39      j++;
40    }
41  }
42  console.log(a);
43  if(
44    (a[0]!=="" && a[0]==a[1] && a[0]==a[2] && a[0]==a[3])||
45    (a[0]!=="" && a[0]==a[5] && a[0]==a[10] && a[0]==a[15])||
46    (a[0]!=="" && a[0]==a[4] && a[0]==a[8] && a[0]==a[12])||
47    (a[1]!=="" && a[1]==a[5] && a[1]==a[9] && a[1]==a[13])||
48    (a[2]!=="" && a[2]==a[6] && a[2]==a[10] && a[2]==a[14])||
49    (a[3]!=="" && a[3]==a[7] && a[3]==a[11] && a[3]==a[15])||
50    (a[3]!=="" && a[3]==a[6] && a[3]==a[9] && a[1]==a[12])||
51    (a[4]!=="" && a[4]==a[5] && a[4]==a[6] && a[4]==a[7])||
52    (a[8]!=="" && a[8]==a[9] && a[8]==a[10] && a[8]==a[11])||
53    (a[12]!=="" && a[12]==a[13] && a[12]==a[14] && a[12]==a[15])){
54    var val=cnt%2==1?"○":"×";
55    alert(val+"の勝ち");
56  }
57}
58  function resetFunc(t){
59	    var f=t.form;
60	    for(var i=0;i<f.length;i++){
61	      if(f[i].type=="button") f[i].value="";
62	    }
63	  }
64
65  </script>
66</head>
67<form name="tick">
68	<table>
69		<tr>
70			<td>
71				<input type="button">
72			</td>
73			<td>
74				<input type="button">
75			</td>
76			<td>
77				<input type="button">
78			</td>
79			<td>
80				<input type="button">
81			</td>
82		</tr>
83		<tr>
84			<td>
85				<input type="button">
86			</td>
87			<td>
88				<input type="button">
89			</td>
90			<td>
91				<input type="button">
92			</td>
93			<td>
94				<input type="button">
95			</td>
96		</tr>
97		<tr>
98			<td>
99				<input type="button">
100			</td>
101			<td>
102				<input type="button">
103			</td>
104			<td>
105				<input type="button">
106			</td>
107			<td>
108				<input type="button">
109			</td>
110		</tr>
111		<tr>
112			<td>
113				<input type="button">
114			</td>
115			<td>
116				<input type="button">
117			</td>
118			<td>
119				<input type="button">
120			</td>
121			<td>
122				<input type="button">
123			</td>
124		</tr>
125	</table>
126	<input type="reset" value="リセット">
127	</p>
128</form>
129</body>

投稿2016/07/25 08:34

編集2016/07/26 00:34

date

総合スコア1820

Alpha

2016/07/25 09:01

ご指摘いただいた部分を修正したところデベロッパーを見たところエラーはなくなりました。ありがとうございます。ボタンは反応するようになりましたが、まだ勝敗判定のところがうまく動きません。

date

2016/07/26 00:30

まずttyp03さんが言っているように両方ともresetFuncなのはおかしいどちらかを違う名前にする勝敗判定ですが、デベロッパーツールを動かしてconsole.logで見れば現在勝敗判定が動いていないのがわかります。それは○×が変わった時に上部のresetFuncが動くようにしていないからです。仮に上部のrestFuncをFuncとした場合

Alpha

2016/07/28 08:27

なるほど。二つのresetFuncの中身は問題なく違う名前で置いていけばよかったのですね。プログラムも参考になりました。ありがとうございます。

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