jqueryの宣言場所に関して
Q&A
Closed
解決したいこと
jqueryを宣言するとjsの関数の一部がが動かなくなり困っています。
発生している問題・エラー
Uncaught ReferenceError: nextMonth is not defined
jqueryの宣言をすると前月次月ボタンの関数が動かなくなります。
かといって宣言を外すとjqueryの関数が動かなくなりますが、原因がわかりません
該当するソースコード
calendar.js
const today = new Date();
const week = ['月', '火', '水', '木', '金', '土', '日'];
let displayMonth = new Date(today.getFullYear(),today.getMonth());
window.addEventListener('load', displayCalendar(today));
var year;
var month;
カレンダー表示
function displayCalendar(date) {
year = date.getFullYear();
month = date.getMonth();
document.getElementById('calendar_main_header_title').innerHTML = `${month+1}月<span>${year}</span>`;
let calendar = createCalendar(year, month);
document.getElementById('calendar_main_table').innerHTML = calendar;
}
//カレンダー作成
function createCalendar(year, month){
// console.log(year);
let calendar = '<table><tr>';
for ( let i = 0; i < week.length; i++ ) {
calendar += '<th>' + week[i] + '</th>';
}
calendar += '</tr>';
let dayCount = 0;
let startDayOfWeek = new Date(year, month, 1).getDay();
if ( startDayOfWeek > 0 ) {
startDayOfWeek -= 1;
} else {
startDayOfWeek = 6;
};
let endDate = new Date(year, month + 1, 0).getDate();//月末の日にち
let weekRow = Math.ceil(( startDayOfWeek + endDate ) / week.length );//1ヵ月の週の数
for ( let w = 0; w < weekRow; w++ ) {
//console.log(startDayOfWeek);
calendar += '<tr>';
for ( let i = 0; i < week.length; i++ ) {
if ( w === 0 && i < startDayOfWeek ) {//第1週目且つ、iが週の始まりの曜日番号より小さかったら<td>を空にする
calendar += '<td class="background-white"></td>';
} else if ( dayCount >= endDate ) {//月の最終日よりdayCountが大きくなったら<td>を空にする
break;
} else if ( (startDayOfWeek + dayCount) % 7 === 6 ) {
dayCount++;
// calendar += '<td class="sun" onClick="dateClick(this)">' + dayCount + '</td>';
calendar += '<td class="sun">' + dayCount + '</td>';
// console.log(startDayOfWeek);
} else {
dayCount++;
// calendar += '<td onClick="dateClick(this)">' + dayCount + '</td>';
calendar += '<td>' + dayCount + '</td>';
}
}
calendar += '</tr>';
}
calendar += '</table>';
return calendar;
};
//カレンダー前月・次月ボタン
function prevMonth(){
displayMonth.setMonth(displayMonth.getMonth()-1);
displayCalendar(displayMonth);
}
function nextMonth(){
displayMonth.setMonth(displayMonth.getMonth()+1);
displayCalendar(displayMonth);
console.log(year);
}
$("td").on("click",function(){
let date = $(this).text();
let reservationDate = year + "-" + (month + 1) + "-" + date;
console.log( date );
$.ajax({
url: "getDate.php",
type: "POST",
//dataType: "json",
data: {"date":reservationDate},
}).done(function(){
console.log('success');
}).fail(function(jqXHR, textStatus, errorThrown, url){
console.log('error');
console.log("jqXHR : " + jqXHR.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
console.log("URL : " + url);
});
});
calendar.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レッスン・料金のご案内</title>
<link rel="stylesheet" href="../css/style.css">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
<script src="../JS/jquery-3.6.0.min.js"></script>
</head>
<!--ヘッダー-->
<?php
require "header.php";
?>
<!--パンくずリスト-->
<div id="breadcrumb">
<ul>
<li><a href="index.php">Home</a></li>
<li><strong>レッスンについて</strong></li>
</ul>
</div>
<!--メインコンテンツ-->
<div id="calendar_contents">
<div id="calendar_header">
<h1 id="h1">オンライン体験レッスンのご予約</h1>
<p>こちらは、オンラインでの体験レッスン受講を希望されている方のための予約ページです。教室にて対面での体験レッスンをご希望の方は、以下からご通学予定の教室をお選びください。</p>
<a href="#">鞍手校</a>-<a href="#">直方校</a>
</div>
<div id="calendar_wrapper">
<div id="calendar_page1">
<div id="calendar_page1_header">
<i class="fas fa-chevron-left" id="prev_month" onclick="prevMonth()"></i>
<h2 id="calendar_page1_header_title"></h2>
<i class="fas fa-chevron-right" id="next_month" onclick="nextMonth()"></i>
</div>
<div id="calendar_page1_table"></div>
</div><!--calendar_page1-->
<div id="calendar_page2">
<div id="calendar_page2_header">
<i class="fas fa-chevron-left prev_page" onclick="prevPage()"></i>
<h2 id="calendar_page2_header_title">2021年5月30日</h2>
<div><i class="far fa-clock" id="clock_btn"></i></div>
</div><!--calendar_page2_header-->
<div id="sub_header">Choose a timeslot</div>
<div id="calendar_page2_table">
</div><!--calendar_page2_table-->
</div><!--calendar_page2-->
</div><!--calendar_wrapper-->
</div><!--calendar_contents-->
<!--フッター-->
<footer>
<p>© 2021 escuela sympatica</p>
<p>
<a target="_blank" href="#">お問い合わせ</a> |
<a href="tel:000111222">000-111-222</a>
</p>
<br>
<a href="" class="sns_icon"><i class="fab fa-youtube" aria-hidden="true"></i></a>
<a href="" class="sns_icon"><i class="fa-facebook fab" aria-hidden="true"></i></a>
<a href="" class="sns_icon"><i class="fa-instagram fab" aria-hidden="true"></i></a>
</footer>
<script src="../JS/calendar.js"></script>
</body>
</html>
自分で試したこと
素のjsで記述すると解決はできましたが、原因が何なのかわからず気になっております。
0
