0

jQueryを用いたカレンダーの作成をしているのですが $ is not defined のエラーが表示されてしまいコンソールでのaddColumnHeaders,addCalenderDates,addGameInfo の呼び出し及びブラウザへの行事の内容の表示が実行されません。jQueryの読み込みができていないのでしょうか。解決方法を含め、ご回答よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Tipton Turbines - Calendar</title>
   <link rel="stylesheet" media="screen and (max-device-width: 999px)" href="tthand.css" />
   <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="turbines.css" />
      <link rel="stylesheet" href="turbines.css" />
   <link href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700,900" rel="stylesheet" type="text/css">

   <script src="modernizr.custom.05819.js"></script>
</head>
<script src="https://code.jquery-1.12.4.min.js"></script>
<script src="modernizr.custom.05819.js"></script>
<body>
   <div id="container">
      <header>
         <h1>
            <img src="images/ttlogo.png" alt="Tipton Turbines" width="182" height="93" title="" />
         </h1>
      </header>
      <nav>
         <ul>
            <li><a href="#">Tickets</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="#">Players</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Community</a></li>
         </ul>
      </nav>
      <article>
         <h2>Calendar</h2>
         <table>
            <caption>August 2016</caption>
            <thead>
               <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td class="differentMonth"></td>
                  <td id="08-1">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-2">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-3">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-4">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-5">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-6">
                     <p></p>
                     <p></p>
                  </td>
               </tr>
               <tr>
                  <td id="08-7">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-8">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-9">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-10">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-11">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-12">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-13">
                     <p></p>
                     <p></p>
                  </td>
               </tr>
               <tr>
                  <td id="08-14">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-15">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-16">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-17">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-18">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-19">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-20">
                     <p></p>
                     <p></p>
                  </td>
               </tr>
               <tr>
                  <td id="08-21">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-22">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-23">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-24">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-25">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-26">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-27">
                     <p></p>
                     <p></p>
                  </td>
               </tr>
               <tr>
                  <td id="08-28">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-29">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-30">
                     <p></p>
                     <p></p>
                  </td>
                  <td id="08-31">
                     <p></p>
                     <p></p>
                  </td>
                  <td class="differentMonth"></td>
                  <td class="differentMonth"></td>
                  <td class="differentMonth"></td>
               </tr>
            </tbody>
         </table>
      </article>
      <footer>
         <p>Tipton Turbines Baseball &bull; Tipton, Iowa</p>
      </footer>
   </div>
   <script src="ttjQuery.js"></script>
</body>
</html>
var daysOfWeek = [ "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"
];

var opponents = [ "Lightning","Combines","Combines","Combines","Lightning","Lightning","Lightning","Lightning","Barn Raisers","Barn Raisers","Barn Raisers","Sodbusters","Sodbusters","Sodbusters","Sodbusters","(off)","River Riders","River Riders","River Riders","Big Dippers","Big Dippers","Big Dippers","(off)","Sodbusters","Sodbusters","Sodbusters","Combines","Combines","Combines","(off)","(off)"
];

var gameLocation = [ "away","away","away","away","home","home","home","home","home","home","home","away","away","away","away","","away","away","away","away","away","away","","home","home","home","home","home","home","",""
];

function addColumnHeaders(){
$("th").each( function( index ) { $(this).text( daysOfWeek[index] ); } );
  }

function addCalenderDates(){
  var i = 1;
 
  do{

     $("#08-" + i + " p:first-child").text( i);
    i++;
  }while (i <= 31);
}

function addGameInfo(){

  for (var i= 0; i < opponents.length; i++) {
    var date =i+1;
    var p =$("#08-" + (i+1) + " p:nth-child(2) ");

    var str ="";
    if (gameLocation[i] === "away")
     str = "@";
    else if (gameLocation[i] === "home")
     str = "vs";

    p.text(str);
    p.append( opponents[i]);
  }
}

function setupPage(){
  addColumnHeaders();
  addCalenderDates();
  addGameInfo();
}

if(window.addEventListener){
  window.addEventListener("load",setupPage,false);
}
 else if(window.attachEvent){
   window.attachEvent("onload",setupPage);
 }
2
  • そうですね、URL を間違えています。例えば、https://code.jquery.com/jquery-3.6.0.min.js とします。
    – metropolis
    Commented 2021年10月23日 2:16
  • @metropolis ありがとうございます!
    – Suzu
    Commented 2021年10月23日 18:46

1 件の回答 1

2

jQuery のロードに失敗しています。現在以下の行でロードをしようとなさっていますが、これが上手く動いていません。

<script src="https://code.jquery-1.12.4.min.js"></script>

原因は 2 つあって、ひとつは URL が間違っていること、もうひとつはこの script タグが head タグの中でも body タグの中でも無い場所に書かれていることです。

jQuery-1.12.4.min.js をお使いになられたいのであれば src は https://code.jquery.com/jquery-1.12.4.min.js にすべきです。そうした上でこの script タグを <head> ... </head><body> ... </body> の中に移動してください。

(また、可能であれば最新の jQuery を使うようにした方が良いです。jQuery 1.12.4 には脆弱性が報告されており、かつ既に end of life となっており修正の見込みがありません。この回答が投稿された時点で jQuery 3.6.0 が最新です。)

2
  • @nekketsuuu正常に作動しました。アドバイス含めご回答ありがとうございました!
    – Suzu
    Commented 2021年10月23日 18:45
  • よかったです。もしよければ、回答の横のチェックマークも押して質問者さんの参考になったことを示していただけるとありがたいです。
    – nekketsuuu
    Commented 2021年10月23日 18:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。