前提・実現したいこと
初学者です。よろしくお願いいたします。。
スクールの課題の過程にて、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>
試したこと
・スペルミスの確認
・変数の確認
・セミコロンの付け忘れの確認
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/11 07:58
2018/09/11 08:01