[Q&A] JSで神経衰弱を作っているのですが、、、

JSで神経衰弱を作っているのですが、、、

解決したいこと

JS jQUeryを勉強しています。

https://qiita.com/baby-0105/items/5d9b1372934b832f2e37
こちらのページを参考にして作っているのですが、エラーが出てしまいます。
エラーの中身を調べても分からないのでここで質問させて下さい。

発生している問題・エラー

Uncaught ReferenceError: $ is not defined
    at index.html:63:15
    at index.html:70:5

 google翻訳より、Uncaught ReferenceError:$ が定義されていません

該当するソースコード

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>07 | 1-jQuery</title>
  <link rel="stylesheet" href="../../00-tools/css/reset.css">
  <link rel="stylesheet" href="../../00-tools/css/base.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="lists clearfix"></ul>
<script defer>
window.addEventListener( 'load', function(){

  function cardShuffle() {
    const array1 = [...Array(8).keys()].map(i => ++i),
          array2 = [...Array(8).keys()].map(i => ++i);
    
    let array = array1.concat(array2);

    for(let i = 0; i < array.length; i++){
      let rand = Math.floor(Math.random() * (i+1));

      [array[i], array[rand]] = [array[rand], array[i]];
    }

    return array;
  }


  const makeLiContents = (function() {
    let randNum = cardShuffle(),
        html = '',
        $ul = $('ul'); //　←エラー箇所？　index.html:63:15

    for(let i = 0; i < randNum.length; i++) {
      html += "<li data-num=" + randNum[i] + ">?</li>";
    }

    $ul.append(html);
  })(); // ←エラー箇所？ index.html:70:5
  
  const openCard = (function(card) {
    let firstCardText, secondCardText, firstClickedData, secondClickedData,
        openFirst = true,
        openFlag = false,
        pair = 0;

    return function toOpenCard(card) {
      let $listsLi = $(card),
      clickedData, clickedText;

      if($listsLi.text() === "?") {
        if (openFlag){
          return;
        } else {
          openFlag = true;
        }
      }

      if($listsLi.text() === "?") {
        clickedData = $listsLi.data("num");
        clickedText = $listsLi.text(clickedData);

        if(openFirst) {
          firstCardText = clickedText;
          firstClickedData = clickedData;
          openFirst = false;
          openFlag = false;
        } else {
          secondCardText = clickedText;
          secondClickedData = clickedData;
          compareCard();

          openFirst = true;
        }
      }

      function compareCard() {
        if(firstClickedData === secondClickedData) {
          pair++;
          openFlag = false;

          if(pair === 8) {
            setTimeout(function() {
              openFlag = false;
              firstCardText.text("?");
              secondCardText.text("?");
            }, 1000)
          }
        } else {
          setTimeout(function() {
            openFlag = false;
            firstCardText.text("?");
            secondCardText.text("?");
          }, 1000)
        }
      }
    };
  })();

  $(".lists").find("li").on("click", function() {
    openCard(this);
  });
}, false);
</script>
</body>
</html>

自分で試したこと

定義されていないと出ているのですが定義してますよね、、、と思ってしまいどこをいじればいいのか分からない状態です。
気づいたら3時間が経過していました。。。
宜しくお願い致します！

1Answer

@blue32a posted at 2022-10-25

$()を使うにはまずjQueryライブラリを読み込む必要があります。
jQueryライブラリが読み込まれていないので「$が定義されていない」というエラーが出ます。
jQueryについての記事では前提条件として省かれていることも多いので自身で補完しましょう。

ちなみにですが「$ is not defined」や「$ is not defined jquery」などで検索すると類似の情報が出てきます。
エラーメッセージなどから調べるのもプログラミングに必要な力です。

2Like

Comments

@Qrara
Questioner
ありがとうございます！完全に見落としていました。。。