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

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

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

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

HTML

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

Q&A

解決済

2回答

4425閲覧

3行3列のマスを作る

Alpha

総合スコア41

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2016/06/10 01:43

編集2016/06/10 02:10

以下のプログラムの条件でマスを3行3列で作りたいのですがどうしたらよいのでしょうか。
for文で一度やってみたのですがうまく動きませんでした。

<script language="JavaScript"> function init(){ document.tick.r1c1.value =" "; } function ticktack(){ if(document.tick.r1c1.value.match(/^×$/)){ document.tick.r1c1.value = "○"; }else{ document.tick.r1c1.value = "×"; } } </script> <form name="tick"> <input type="button" name="r1c1" onclick="ticktack()"> </p> </form>

以下のようなfor文を用いて作ってもだめでした。

var i, j; for(i=0; i<3; i++){ for(j=0; j<3; j++){ function init(){ document.tick.r1c1.value =" "; } }}

よろしくお願いします。

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

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

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

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

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

kei344

2016/06/10 01:55

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」をコードとともにお書きください。
Alpha

2016/06/10 02:03

for文を用いてfinction initをループさせて マスを作ろうとしたのですがダメでした。 ``` var i, j; for(i=0; i<3; i++){ for(j=0; j<3; j++){ function init(){ document.tick.r1c1.value =" "; } }}
kei344

2016/06/10 02:08

ここは改行が無視されるため、本文に追記をお願いします。よろしくおねがいします。
guest

回答2

0

ベストアンサー

動的に作り出す必要性はあるのでしょうか。
単純にテーブルで作ってはダメなのですか?

HTML

1<table> 2 <tr> 3 <td> <input type="button" name="r1c1" onclick="ticktack()"></td> 4 <td> <input type="button" name="r1c2" onclick="ticktack()"></td> 5 <td> <input type="button" name="r1c3" onclick="ticktack()"></td> 6 </tr> 7 <tr> 8 <td> <input type="button" name="r2c1" onclick="ticktack()"></td> 9 <td> <input type="button" name="r2c2" onclick="ticktack()"></td> 10 <td> <input type="button" name="r2c3" onclick="ticktack()"></td> 11 </tr> 12 <tr> 13 <td> <input type="button" name="r3c1" onclick="ticktack()"></td> 14 <td> <input type="button" name="r3c2" onclick="ticktack()"></td> 15 <td> <input type="button" name="r3c3" onclick="ticktack()"></td> 16 </tr> 17</table>

これはサンプルなので、ticktack関数の呼び出し方は変更が必要です。

投稿2016/06/10 02:00

ttyp03

総合スコア16996

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

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

Alpha

2016/06/10 02:05

for文を用いて作ることは不可能なのでしょうか?
ttyp03

2016/06/10 02:22

当然できますが、必要性は全く感じないですね。 以下は適当に作ったので参考程度に。 <html> <head> <script> function makeMasu() { var x; var y; var masuHtml = '<table>'; for(y = 1; y <= 3; y++){ masuHtml = masuHtml + '<tr>'; for(x = 1; x <= 3; x++ ){ masuHtml = masuHtml + '<td><input type="button" name="r' + y + 'c' + x + 'onclick="ticktack()"></td>'; } masuHtml = masuHtml + '</tr>'; } masuHtml = masuHtml + '</table>'; document.getElementById("masu").innerHTML = masuHtml; } </script> </head> <body onload="makeMasu()"> <div id="masu"></div> </body> </html>
Alpha

2016/06/10 02:35

なるほど。for文よりTableでおいたほうがよいですね。 ticktack関数の呼び出し方の変更とは document.tick.r1c1.value を一個ずついじっていかなければならないのでしょうか?
ttyp03

2016/06/10 02:39

この質問はマスを作ることに関してだったのでそこまでは考えていませんでした。 書くとすれば引数でidを渡すとかですかね。 onclick='ticktack("r1c1")' 最近のウェブ業界には疎いので、ベテランの人ならもっと良い書き方があるのかもしれません。
Alpha

2016/06/10 02:44

となると、○×の動作はしなくなるのではないでしょうか?
ttyp03

2016/06/10 02:45

深くは考えていないので、中身の処理はご自分で考えてください。 ここはあくまでもマスを動的に作れないか、という質問の回答です。
guest

0

<table>タグを用いて3×3のレイアウトで表組をつくり、各<TD>タグ内に```<input type="button" name="r1c1" onclick="ticktack()">```を記載してはいかがでしょうか。 その際、name属性、onclick属性の関数部分は適宜1~9に対応するものに変更してください。

init()内では"r1c1"に対応する9つのinputタグを初期化してください。
ticktack()は"r1c1"も対応する9つのinputタグ分functionを準備してみましょう。

その後、冗長な記述を徐々に最適化(ループで記述、関数を共有化できるように変更)するとよいでしょう。かなり冗長な記述になっているので。

投稿2016/06/10 01:55

takyafumin

総合スコア2335

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問