メッセージの表示方法

Question

https://teratail.com/questions/37507?whotofollow
の続きになります。
リセットボタンの処理まではできたのですがメッセージの表示方法がわかりません。

・全てのマスが埋まるとメッセージが表示されアラートボックスの「ＯＫ」を押すと最初からにする。
・すでに○か×が表示されているマスをクリックするとメッセージが表示される。

この二つをmessage += を用いて表示させたいのですがどのようにおいていけばよいのでしょう。

  <script language="JavaScript">
  try{
    document.addEventListener ('click',function(e){myfunc(e)},true);
    }catch(e){
    document.attachEvent('onclick',function(e){myfunc(e)});
  }
  function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="INPUT" && t.type=="button"){
    if(t.value=="×"){
    t.value="○";
    }else{
    t.value="×";
    }
  }
  if(t.nodeName=="INPUT" && t.type=="reset"){
  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>
    </tr>
    <tr>
        <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>
    </tr>
  </table>

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

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

Answer 1

HTMLやJavascriptでの技術的な内容を考える前に、まずは機能の要件や手続きの順序を整理してみることをお勧めします。１つの技術的なことが解決しても、次にまた同じように技術的なことにつまづいてしまっているようなので。

試したことが記載されていなかったり、自分でわからない部分を掘り下げて質問できていない状態では
「やってほしいことだけを記載した丸投げの質問」と捉えられてしまっても仕方がないですね。
もう少し、要件（やりたいことややっていること）や問題点を掘り下げてみましょうか。

---

・全てのマスが埋まるとメッセージが表示されアラートボックスの「ＯＫ」を押すと最初からにする。

全てのマスが埋まっている状態というのは、具体的に説明するとどのように言い換えられますか？
文章で表現すると難しいかもしれないので、箇条書きで書き出すと良いと思います。
（プログラム的な説明ではなく、仕様的な説明として）
箇条書きの条件は、複数の条件を１つに書かず、なるべく１つの条件だけで箇条書きにしたほうがシンプルでよいです。

・すでに○か×が表示されているマスをクリックするとメッセージが表示される。

こちらについても１つ目と同様に条件を書き出してもらえますか？

上記について具体的に書き出した後に「プログラムではどう書くか？」というステップになります。
上記ステップがない限り、何をしたらよいのか分からず、何を調べたらいいのかも分からないような気がします。
ここは、なれるまで疎かにしないほうが、後々の理解や自分の中の理解度の整理につながります。

メッセージの表示方法

Javasscriptでのメッセージの表示のさせ方は分かりますか？
分からないようであれば調べ方のヒントを追記しようと思います。
分かるようであれば、試した結果をソースコードとして質問文に追加してみてください。

この二つをmessage += を用いて表示させたいのですがどのようにおいていけばよいのでしょう。

この部分はあえて無視しています。
まずは上記のことができてからですかね。手段だけが先行してしまっているように思えます。

また、今記載しているソースコードについては、１つ１つ説明できるくらい理解をしておきましょう。

• document.addEventListenerとは何をしているのか？
• myfunc(e)のeは何を指すのか？

など。

---

ちなみに、答えそのものを回答するつもりは全くありません。
考えたのヒントや分からないところを伝えるサポートができればと思っています。

Comments

[Alpha]

・全てのマスが埋まるとメッセージが表示されアラートボックスの「ＯＫ」を押すと最初からにする。

最初の２つの質問については
yambejpさんの回答に投稿したコメントを参照していただければ幸いです。

メッセージの表示方法ですが
alert文を用いようと思っています。

[takyafumin]

> 最初の２つの質問については
> yambejpさんの回答に投稿したコメントを参照していただければ幸いです。

https://teratail.com/questions/37829を確認しましたが、記載いただきたい内容は確認できませんでした。
他の回答者にも分かりやすくなるよう、本質問文に追記をお願いしたいです。

> メッセージの表示方法ですが
> alert文を用いようと思っています。

こちらはalert文の利用で良いと思います。

Answer 2

・全てのマスが埋まるとメッセージが表示されアラートボックスの「ＯＫ」を押すと最初からにする。

前回の質問から気になっていたんですが、全部うまるってことは
最後の１個はかならず×になっちゃいますけど大丈夫なのでしょうか？
（最後のあいてるマスをクリックした瞬間全部うまるので）

・すでに○か×が表示されているマスをクリックするとメッセージが表示される。

仕様がいまいちわからないのですが、空のマスをクリックして×→○→×を繰り返したとして
別の任意のマスをクリックしたらその時点でそのマスが確定ということでしょうか？
それでメッセージを表示して、クリックできないようにするという意味でしょうか？

その辺の仕様が中途半端に提示されているのでなんとも言えませんね・・・

Comments

[Alpha]

質問する順番を間違えていました。
https://teratail.com/questions/37829
こちらのがまずできないと成り立たないと思います。

ですが、全部埋まる件については上のが完成するとおそらく９回目（奇数回目）でアラートボックスが表示されるものにいなると思います。

二つ目の質問については
https://teratail.com/questions/37829
の順番でやってそのマスは一度クリックされたら変更されないようにした上でアラートボックスのようなものを表示したいです。