javaScriptでカレンダーを制作しています。next.prevを押して前の月、次の月を表示する際の不具合をなおしたい。

前提・実現したいこと

JavaScriptでカレンダーを作成したいです。
index.htmlの最初の画面は正しく表示されているのですが、ボタンを押して前の月、次の月を表示する際に不具合が起きています。
flexでtableを横並びにしたいので、1から15日、16日から月の最後の日を表示させています。

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

①矢印を押して次の月、前の月を表示したいが今の月が消えず、下に追加されています。
②矢印を２回押したら次の次の月を表示したいのができません。
(次へを押し続けたら次の年の1月にしたい)

該当のソースコード

html
1<!doctype html>
2<html>
3
4<head>
5	<meta charset="utf-8">
6	<meta name="robots" content="noindex,nofollow">
7</head>
8<style>
9	.aaa {
10		display: flex;
11	}
12</style>
13<body>
14
15	<div class="wrapper">
16		<!-- xxxx年xx月を表示 -->
17		<h1 id="header"></h1>
18
19		<!-- ボタンクリックで月移動 -->
20		<div id="next-prev-button">
21			<button id="prev" onclick="prev()">‹</button>
22			<button id="next" onclick="next()">›</button>
23		</div>
24     
25		<!-- カレンダー -->
26		<div class="aaa">
27			<table id="calendarleft" class="p-article__calendar">
28				<tr>
29					<th>曜日</th>
30					<th>日付</th>
31					<th>コメント</th>
32				</tr>
33			</table>
34			<table id="calendarright" class="p-article__calendar">
35				<tr>
36					<th>曜日</th>
37					<th>日付</th>
38					<th>コメント</th>
39				</tr>
40			</table>
41		</div>
42	</div>
43	<script src="js/script.js"></script>
44</body>
45
46</html>

javaScript
1let topicsData = [
2    ["1", "1日です"],
3    ["4", "4日です"],
4    ["9", "9日です"],
5    ["15", "15日です"],
6    ["27", "27日です"]
7]
8
9function showProcess(year, month) {
10
11    const lastday = new Date(year, month + 1, 0).getDate() + 1;
12    const topics = new Array();
13    for (i = 0; i <= lastday; i++) {
14        topics[i] = "";
15    }
16    for (i = 0; i < topicsData.length; i++) {
17        topics[topicsData[i][0]] = topicsData[i][1];
18    }
19
20    //HTMLタグをつくる
21    const table = document.getElementById("calendarleft");
22
23    for (let i = 1; i < 15; i++) {
24        let tr = document.createElement("tr");
25
26        //tdタグ(日付)　　　
27        let td = document.createElement("td");
28        td.textContent = i;
29
30        //tdタグ(曜日)　　
31        xday = new Date(year, month, i);
32        xdays = xday.getDay();
33        weekjp = new Array("日", "月", "火", "水", "木", "金", "土");
34        weeks = weekjp[xdays];
35        let tdWeek = document.createElement("td");
36        tdWeek.innerText = weeks;
37        //tdタグ(トピックス)　
38
39        let topicsText = document.createElement("td");
40        topicsText.innerText = topics[i];
41        console.log(topics[i]);
42
43        //HTMLに表示させる
44        document.querySelector('#header').innerHTML = (month + 1) + "月";
45        table.appendChild(tr);
46        tr.appendChild(td);
47        tr.appendChild(tdWeek);
48        tr.appendChild(topicsText);
49    }
50
51    const table2 = document.getElementById("calendarright");
52    for (let i = 16; i < lastday; i++) {
53        let tr = document.createElement("tr");
54
55        //tdタグ(日付)　　　
56        let td = document.createElement("td");
57        td.textContent = i;
58
59        //tdタグ(曜日)　　
60        xday = new Date(year, month, i);
61        xdays = xday.getDay();
62        weekjp = new Array("日", "月", "火", "水", "木", "金", "土");
63        weeks = weekjp[xdays];
64        let tdWeek = document.createElement("td");
65        tdWeek.innerText = weeks;
66        //tdタグ(トピックス)　
67
68        let topicsText = document.createElement("td");
69        topicsText.innerText = topics[i];
70        console.log(topics[i]);
71
72        //HTMLに表示させる
73        document.querySelector('#header').innerHTML = (month + 1) + "月";
74        table2.appendChild(tr);
75        tr.appendChild(td);
76        tr.appendChild(tdWeek);
77        tr.appendChild(topicsText);
78    }
79
80
81}
82
83
84// const today = new Date();
85// let showDate = new Date(today.getFullYear(),today.getMonth(),1);
86
87window.onload = function () {
88    const today = new Date();
89    showProcess(today.getFullYear(),today.getMonth());
90};
91
92function prev() {
93    const today = new Date();
94    let showDate = new Date(today.getFullYear(),today.getMonth(),1);
95    // showDate.setMonth(showDate.getMonth()-1);
96    showProcess(showDate.getFullYear(),showDate.getMonth()-1);
97}
98
99function next() {
100    const today = new Date();
101    let showDate = new Date(today.getFullYear(),today.getMonth(),1);
102    // showDate.setMonth(showDate.getMonth()+1);
103    showProcess(showDate.getFullYear(),showDate.getMonth()+1);
104}

試したこと

showDate変数を作ってそれをyearとmonthの引数にしてみました。

補足情報（FW/ツールのバージョンなど）

m.ts10806

2022/02/05 00:01

タイトルは要件を記載してください。直面している問題、エラー内容、など。「javaScriptでカレンダーを作成したい」だと本質問は起きてる問題の解決だけにとどまらず、完成するまで終わらない　ということになります。

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

回答1件

ベストアンサー

「課題」と書くとみんなに叩かれます。
自分でやったほうが良いというのがこういう掲示板の暗黙のマナーですので笑
気をつけましょう。

コードは実行させてませんが、眺めた限りの考え方だけ書いてみます。

まずは日付がその都度、その関数内で作成されているのがちょっとおかしいです。

「onLoad」内、「next」「prev」が呼ばれた時点で毎回 new Date してしまっているので起動時、毎回クリックするたびに今の日付で年と月を作成する事になります。

今回の場合は全体で年と月を最初に一回だけ作れば後は足し算引き算するだけで済むはずです。

まずはtopicsDataと同じ所で全体で使う目的で何年と何月なのかの２つの変数を宣言します。

nextで、月を＋１して、１３になれば年を＋１して、月を１にする。
prevで、月を－１して０になれば年を－１して月を１２にする。

でその後にカレンダーを描画する関数を呼ぶと。

追加されてしまうのは消してないからでしょうね。
コードは眺めただけなので追ってませんが、何でも答えを書くのは「課題」に対しては嫌なので「要素書き換え」
で調べましょう（笑

素のJavaScriptは最近触ってないので間違ってるかもしれませんが考え方は一緒です。

ここまで説明してちんぷんかんぷんならきっとここまでのコードもコピペなのでは？

この程度のコードなら１から全部追っかけていってもそれぞれのコードが何をしているのか？

自分のコードの何が悪いのかわかると思います。

頑張ってみてください。

投稿2022/02/04 19:16

landy77

総合スコア1616

uratarosu

2022/02/04 23:40

ご指摘ありがとうございます。課題として提出するものではなく、自分でこんなの作りたいなあと思って自分に課した課題だったので解釈を間違えさせるような書き方をしてしまい申し訳ありませんでした。

uratarosu

2022/02/04 23:52

一度こちらのヒントで進めてみたいと思います。ありがとうございます。

uratarosu

2022/02/05 05:02 編集

ヒントから無事解決しました！ありがとうございました！「onLoad」内、「next」「prev」が呼ばれた時点で毎回 new Date してしまっているので起動時、毎回クリックするたびに今の日付で年と月を作成する事になります。 →new Date()の書き方がわかっておリませんでした。こちら変数に代入してyearとmonthを取得するだけに使用することにしました。 nextで、月を＋１して、１３になれば年を＋１して、月を１にする。 prevで、月を－１して０になれば年を－１して月を１２にする。 →ifで分岐したら解決しました！「要素書き換え」 →消し方を調べていましたが、innerHTMLを空にしてから関数の実行でうまく行きました！

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