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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3516閲覧

<table>とJS 4*4のマス目が表示できない

osakanasan

総合スコア18

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/11 07:48

前提・実現したいこと

初学者です。よろしくお願いいたします。。
スクールの課題の過程にて、4*4のマス目を作成することになりました。
HTMLの<table>と、JSにて<tr>および<td>を追加する関数を作成し、
これを用いてマス目を作れると思ったのですが、、、

期待に反して、4*4のマス目が表示されません。
下記のソースコードにおける//onloadの箇所に件の関数を作りましたが、
これが表示されないようです。
以前に作成した九九表のソースコードを参照として、その下にメモしています。

素人目で、スペルミスや全体のミスが無いか調べたつもりですが
どこでエラーが起きているか分かりません。
エラーの箇所と理由をお教え下さる方いらっしゃいましたら、
よろしくお願いいたします。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ルーレット</title> <link rel="stylesheet" href="roulette.css"> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var start_flag = false; var interval_id; // スタート function start_roulette { if(start_flag === false) { interval_id = setInterval(lets_roullette, 0); //clearIntervalを用いるため、、、 start_flag = true; } } // ルーレット function lets_roulette { } // ストップ function stop_roulette { clearInterval(interval_id); start_flag = false; } // リセット function reset_roulette { } // onload $(function() { $("#start").click(start_roulette); $("#stop").click(stop_roulette); $("#reset").click(reset_roulette); for(var i=0 ; i < 4; i++) { var tr = $('<tr></tr>'); for(var j=0 ; j < 4; j++) { tr.append($('<td></td>').html(j)); } $('#matrix').append(tr); } }); /* $(function() { for(var i=1 ; i <= 9; i++){ // 一行ずつ作るため、1重目にi=1の<tr>を用意する。2重目が一巡したらここに戻る var tr = $('<tr>'); // <tr>の作成と宣言 for(var j=1 ; j <= 9; j++) { // 2重目にて<td>に入れる式&解を用意し、実際に<tr>に入れていく。j=9までループ var calculation = i + "*" + j + "=" + i*j; // <td>に入れる式&解を用意して宣言。 tr.append($('<td>').html(calculation)); //1重目で用意した<tr>の末尾に<td>を作成してから式&解を入れる } $('#matrix').append(tr); // ループで完成した<tr>をテーブルの末尾から入れる。1重目に戻る } $("td:even").addClass("even"); //<td>のeven(偶数)を指定し、"even"のクラスを追加する }); */ </script> </head> <body> <div id="wrapper"> <table id="matrix"> <!-- <tr> <td>1</td><td>2</td><td>3</td><td>4</td> </tr> <tr> <td>5</td><td>6</td><td>7</td><td>8</td> </tr> <tr> <td>9</td><td>10</td><td>11</td><td>12</td> </tr> <tr> <td>13</td><td>14</td><td>15</td><td>16</td> </tr> --> </table> <div id="button_3"> <button id="start">スタート</button> <button id="stop">ストップ</button> <button id="reset">リセット</button> </div> </div> </body> </html>

試したこと

・スペルミスの確認
・変数の確認
・セミコロンの付け忘れの確認

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

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

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

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

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

guest

回答1

0

ベストアンサー

function start_roulette {

ではなく

function start_roulette() {

ですね。
他も同様です。

投稿2018/09/11 07:56

kszk311

総合スコア3404

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

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

kszk311

2018/09/11 07:58

検証ツールで確認してみてください。シンタックスエラーとなっていることがわかります。
osakanasan

2018/09/11 08:01

ご回答下さり、誠にありがとうございます。 マス目が表示されるようになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問