質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2709閲覧

メッセージ表示とリセット処理

Alpha

総合スコア41

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/06/10 05:17

以下のプログラムに
・すでに○か×が表示されているマスをクリックするとメッセージが表示される。
・どのタイミングにおいてもリセットボタンを押すと全てのマスの表示を「(スペース)」にする。
・全てのマスが埋まるとメッセージが表示されアラートボックスの「OK」を押すと最初からにする。

の処理を加えたいのですがうまく動きません。

<script language="JavaScript"> function init(id){ document.getElementById(id).value =" "; } function ticktack(id){ if(document.getElementById(id).value.match(/^×$/)){ document.getElementById(id).value = "○"; }else{ document.getElementById(id).value = "×"; } } if(! document.getElementById(id).value.match(/^\S$/)){ message += "そのマスはすでに選ばれています。\n"; } </script> </head> <form name="tick"> <table> <tr> <td> <input type="button" id="r1c1" onclick="ticktack('r1c1')"></td> <td> <input type="button" id="r1c2" onclick="ticktack('r1c2')"></td> <td> <input type="button" id="r1c3" onclick="ticktack('r1c3')"></td> </tr> <tr> <td> <input type="button" id="r2c1" onclick="ticktack('r2c1')"></td> <td> <input type="button" id="r2c2" onclick="ticktack('r2c2')"></td> <td> <input type="button" id="r2c3" onclick="ticktack('r2c3')"></td> </tr> <tr> <td> <input type="button" id="r3c1" onclick="ticktack('r3c1')"></td> <td> <input type="button" id="r3c2" onclick="ticktack('r3c2')"></td> <td> <input type="button" id="r3c3" onclick="ticktack('r3c3')"></td> </tr> </table> <input type="reset" value="リセット"> </p> </form> </body>

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alpha

2016/06/10 05:36

プログラムをそのまま使っているので続きという表現になりますね。
guest

回答3

0

ベストアンサー

たとえばこんな感じ
あとは拡張してつかってください

<script> 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 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> <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>

投稿2016/06/10 08:12

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alpha

2016/06/11 08:22

このプログラムで実行してみるとリセットボタンは動作するのですが クリックすることで「」(スペース)状態になってしまいます。
yambejp

2016/06/13 00:43

ああ、仕様がちがいましたね 空→×→○→×→○→以下同 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=""; } } }
Alpha

2016/06/13 03:54

やはりそうでしたか。 これで「どのタイミングにおいてもリセットボタンを押すと全てのマスの表示を「(スペース)」にする。」というのはできました。 ありがとうございます!
guest

0

うまく動かないと思われた時には、ブラウザでのデバッグモードを起動してJavaScriptのエラーが何で出ているかを確認すると良いでしょう。たいていのブラウザであればF12でデバッグモードで起動します。

JavaScriptの箇所ですが、以下の2点が気になります。

  • init(id) は どこからも呼び出されません。
  • 起動直後にif(! document.getElementById(id).value.match(/^\S$/)){が呼び出されているのは正しいのか。実はボタンを押した後に実行されるものでしょうか。

他には、HTMLの本文が<body>~</body>で囲まれていません。

投稿2016/06/10 07:19

A-pZ

総合スコア12011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alpha

2016/06/10 07:24

init()にして実行したんですがリセットボタンが表示されているのに押してもリセットされないのとアラートが表示されません。 おそらく```if(! document.getElementById(id).value.match(/^\S$/)){```は問題ではないのではないのでしょうか。
A-pZ

2016/06/10 09:09

input type="reset"は、入力フォームに含まれるテキスト入力やラジオボタンの選択状況をHTML表示時の状態に戻すもので、buttonのvalueは送信項目に含まれないため対象外です。
guest

0

inputのタイプをbuttonからtextにしてください
resetは効くようになります
cssなどでbutton風に見せればよいでしょう

全部うまったときのチェックはinputのクリック時にチェックをいれて
うまった時点でform.reset()すればよいでしょう

投稿2016/06/10 05:31

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alpha

2016/06/10 05:39

CSSは使わずにinputもtextではなくbuttonで表示したいので 他の方法はないでしょうか?
yambejp

2016/06/10 05:51

buttonはresetの対象外ですからね onresetで対象formに対してforでelementsを走査して type=buttonのelementsのvalueを" "に変えるとかでしょうかね for (var i=0;i<myform.length;i++){ if(f[i].type=="button") f[i].value=" "; }
yambejp

2016/06/10 05:52

typeミス for (var i=0;i<myform.length;i++){ if(myform[i].type=="button") myform[i].value=" "; }
Alpha

2016/06/10 06:23

この文を追加してもなにも変わらなかったのですが。
masaya_ohashi

2016/06/10 07:33

yambejpさんのコメントは「答え」を教えてくれているのではなく、「例」を与えてくれています。コードをそのまま入れても動きません。 myFormはあなたのコードでいうdocument.tickです。formエレメントに配列としてアクセスすると、子要素のinput等が取れます。そのtypeがbuttonならvalueを空にしてみよう、というものです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問