jQueryを用い九九表を作成する。表示エラー、デバック方法

前提・実現したいこと

プログラミング初心者です。
jQueryを使って九九の表を作成する。
様々な記事を参考にコードを書いたのですが表示されず
何が原因なのかわからない点、また解決策・デバックの方法など
教えて頂きたく思います。
初歩的なご質問ですがよろしくお願い致します。

10.17.19行目に下記のエラーメッセージが出ています。

発生している問題・エラーメッセージ

$is not defined; please Fix or add /"global $

該当のソースコード

jQuery
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>jQuery</title>
6    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
7    <script>
8        /* 課題処理を追加 */
9        //1.id matrixを取得する
10        var table = $("#matrix");
11        //forを使って左の数字を出す　i=左
12        for (var i = 1; i <=9; i++) {
13            table.append("<tr id='tr_ "+i+" '></tr>");
14            
15            for (var j =1; j <=9; j++){
16                if ((i %2===1 && j %2===1) ||(i %2===0 && j %2===0)){
17                    $("#tr_" +i).append("<td style = 'background-color:#ffffff'>" +i+ "*" +j+ "=" +(i*j) +"</td>");
18                }else{
19                    $("#tr_" +i).append("<td style = 'background-color:#cccccc'>" +i+ "*" +j+ "=" +(i*j) +"</td>");
20                }
21            }
22        }
23    </script>
24</head>
25<body>
26    <table id="matrix">
27        <caption>九九表</caption>
28    </table>
29</body>
30</html>
31

試したこと

エラーメッセージの検索

m.ts10806

2020/08/01 21:33

細かいですがdebug なので「デバッグ」です。

m.ts10806

2020/08/01 21:34

しかし、エラーを手打ちしてませんか？コピペしてください。

m.ts10806

2020/08/01 23:24

「JAR」は本件とどのように関係するのでしょうか

行動規範の内容に同意します

回答3件

何が原因なのか

jQuery のAPIを把握していないのが原因です。

javascript
1
2$(function() {
3    var $table = $("#matrix");
4    for (var i = 1; i <=9; i++) {
5      var $tr = $("<tr>").attr( "id", "tr"+i ).appendTo( $table );
6
7      for (var j =1; j <=9; j++) {
8        var 
9          txt = i+ "*" +j+ "=" +(i*j),
10          bg
11        ;
12        if ( (i % 2 === 1 && j % 2 === 1) || ( i % 2 === 0 && j % 2 === 0 ) ) {
13          bg = "#ffffff";
14        } else {
15          bg = "#cccccc";
16        }
17
18        $("<td>").css( "background-color", bg ).text( txt ).appendTo( $tr );
19      }
20    }
21
22});

$( fn ) ... window.addEventListener("DOMContentLoaded", fn ) に等しい
$elm = $("<tagName>") ... jQuery オブジェクトで包括した要素（以下、jQuery要素）を作成
$elm.attr() ... jquery要素の属性操作し、$elm を返却
$elm.appendTo( parent ) ... parent.appendChild(jQuery要素) と同じ、$elm を返却
$elm.css() ... jquery要素のstyle属性を操作、$elm を返却
$elm.text( text ) ... elm.textContent = text と同じ。$elm を返却

解決策

jQuery公式ドキュメントや和訳されたサイトでAPIを徹底的に調べる。

デバッグの方法

ブラウザのF12で開発者コンソールが開きます。

開発者コンソール使い方

コピペで終わらせず、一つ一つのAPIを確認するのが初心者脱出の近道です。

投稿2020/08/01 22:13

編集2020/08/01 22:31

AkitoshiManabe

総合スコア5434

Mackatta

2020/08/02 09:07

ご回答ありがとうございます。わからない事だらけの中この様なアドバイスはとても助かります‼︎ 道標のアドバイスありがとうございました！

行動規範の内容に同意します

$ is not defined で検索して最初にでてくる記事にように、$(function(){ で囲ってみてどうなりますか？。

$(function(){
  var table = $("#matrix");
// ...

})

投稿2020/08/01 19:02

anozon

総合スコア662

Mackatta

2020/08/01 19:13

確かにこの宣言を忘れていました。。。お伺いした通りに追加してみたのですがやはり表示されませんでした。。。

miyabi_pudding

2020/08/02 08:46

> 表示されませんでした。。。何が表示されないのでしょうか？九九の表が、であれば、本質問の要件の、エラーがでるということは、こちらのご回答で解決するので、それとは別の問題です。（ようは質問者さんの構文自体が間違っている）

Mackatta

2020/08/02 09:28

コメントありがとうございます。上記のコードではタイトルは縦に表示（ｈｔｍｌのみ）されたのですが九九の表が表示されませんでした。現在ベストアンサーに選ばせて頂いたコードと比較し何が原因だったのか模索中です。もしよろしければ私の構文の何がいけなかったのかヒントなど頂ければ幸いです。よろしくお願いします。

miyabi_pudding

2020/08/02 09:42 編集

タイトルは本質問のタイトルのことです・・・。 HTMLのタイトルのことではありません。それは別要件ですし、ご自身で、回答のコードと見比べているのなら、そうすべきかと思います。

行動規範の内容に同意します

ベストアンサー

これでどうでしょうか？

      $(function() {
        /* 課題処理を追加 */
        //1.id matrixを取得する
        var table = $('#matrix')
        //forを使って左の数字を出す　i=左
        for (var i = 1; i <= 9; i++) {
          $tr = $('<tr>')
          table.append($tr)

          for (var j = 1; j <= 9; j++) {
            // if ((i % 2 === 1 && j % 2 === 1) || (i % 2 === 0 && j % 2 === 0)) {
            if (i % 2 === j % 2) {
              $tr.append('<td style="background-color:#ffffff">' + i + '*' + j + '=' + i * j + '</td>')
            } else {
              $tr.append( '<td style="background-color:#cccccc">' + i + '*' + j + '=' + i * j + '</td>')
            }
          }
        }
      })

投稿2020/08/01 19:58

anozon

総合スコア662