カレンダーの次月と前月をクリックしたら、前のカレンダーの表示が残ったままになってしまう。

初学者です。
javaScriptで会社の自動シフト作成表を作ってます。
カレンダーの次月と前月をクリックしたら前のカレンダーが残った状態なってしまいます。
前のカレンダーの表示を削除した上で次月、前月を表示したいです。

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

function clearCalender() { //前のカレンダーを削除
const table = document.querySelector('.table1');
while (table.firstChild) {
table.removeChild(table.firstChild);
}
}
を使っても上手くいかず、最初に削除されてしまいます。

エラーメッセージ


### 該当のソースコード
```ここに言語を入力
コード

```　　　                       
　　　　　　　　　　　　　　　　　　　　　　　--CSS--

body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
}

.table1 {
  width: 80%;
}

.thisMonth  {
text-align: center;
margin: 40px auto;
}

.sat {
  background-color: skyblue;
}

.sun {
  background-color: tomato;
}

#prev,
#next {
  display: block;
  margin: auto;
  cursor: pointer;
} 

.heading {
  display: flex;
}

.header {
  font-weight: bold;
}

.btn {
  margin-left: 150px;
  margin-bottom: 20px;
}

table,
th,
tr,
td {
  border-collapse: collapse;
  border: 2px solid #333;
}

td {
  width: 53px;
  height: 28px;
  text-align: center;
}

#run {
  cursor: pointer;
}

#run:hover {
  opacity: 0.5;
}

tbody tr td {
  cursor: pointer;
  user-select: none;
}

                                --HTML--
   
<!DOCTYPE html> 
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shift Creation</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="heading">
    <span id="prev">&laquo;</span>
    <h3 id="title" class="thisMonth"></h3>
    <span id="next">&raquo;</span>
  </div>
  <button id="run" class="btn">RUN</button>
  <div class="container" id="_container">
    <table class="table1">  
      <thead>
        <tr id="calender">
          <th rowspan="2">root</th>
          <th rowspan="2">name</th>
        </tr>
        <tr id="week"></tr>
      </thead>
      <tbody id="tbody1">   
        <tr id="row0">
          <th>2009</th>
          <th>yu-ki</th>
        </tr>
        <tr id="row1">
          <th>2010</th>
          <th>aya</th>
        </tr>
        <tr id="row2">
          <th>2011</th>
          <th>rino</th>
        </tr>
        <tr id="row3">
          <th>2012</th>
          <th>den</th>
        </tr>
        <tr id="row4">
          <th>2014</th>
          <th>petie</th>
        </tr>
        <tr id="row5">
          <th>STR</th>
          <th>tanaka</th>
        </tr>
        <tr id="row6">
          <th>STR</th>
          <th>yoshida</th>
        </tr>
      </tbody>
    </table>
    <table class="table2">
      <thead>
        <tr>
          <th height="60">P.H</th>
        </tr>
      </thead>
      <tbody id="tbody2">
        <tr id="_row0">
          <td id="phValue0">0</td>
        </tr>
        <tr id="_row1">
          <td id="phValue1">0</td>
        </tr>
        <tr id="_row2">
          <td id="phValue2">0</td>
        </tr>
        <tr id="_row3">
          <td id="phValue3">0</td>
        </tr>
        <tr id="_row4">
          <td id="phValue4">0</td>
        </tr>
        <tr id="_row5">
          <td id="phValue5">0</td>
        </tr>
        <tr id="_row6">
          <td id="phValue6">0</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

                                     --javaScript--
'use strict';

{ 
 
  const date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth();

  function clearCalender() { //前のカレンダーを削除
    const table = document.querySelector('.table1');
    while (table.firstChild) {
      table.removeChild(table.firstChild);
    }
  }
 
  function renderTitle() {//年月を表示
    const title = document.getElementById('title');
    title.textContent = `${year}/${String(month + 1).padStart(2, '0')}`;
  }
  
  function getCalender() {  //日数分のセルを生成しtextContentで日付を入れる
    const lastDate = new Date(year, month + 1, 0).getDate();
    for (let i = 1; i <= lastDate; i++) {
      const tdDate = document.createElement('td');
      tdDate.textContent = i;
      document.getElementById('calender').appendChild(tdDate);
      if (new Date(year, month, i).getDay() === 6) {
        tdDate.classList.add('sat');
      }
      if (new Date(year, month, i).getDay() === 0) {
        tdDate.classList.add('sun');
      }
    };
  }
  
  function getWeek() {//当月の曜日を取得しセルを生成
    const lastDate = new Date(year, month + 1, 0).getDate();
    for (let n = 1; n <= lastDate; n++) {
      const tdDay = document.createElement('td');
      let wObj = ["日", "月", "火", "水", "木", "金", "土"][new Date(year, month, n).getDay()];//指定した日付の曜日を文字列で取得
      tdDay.textContent = wObj;
      document.getElementById('week').appendChild(tdDay);
      if (tdDay.textContent==="土") {
        tdDay.classList.add('sat');
      } 
      if (tdDay.textContent==="日") {
        tdDay.classList.add('sun');
      }
    };
  }

  function addCell(id) {//シフト用のセルを生成
    const lastDate = new Date(year, month + 1, 0).getDate();
    for (let n = 1; n <= lastDate; n++) {
      const td = document.createElement('td');
      td.textContent = '○';
      document.getElementById(id).appendChild(td);
      td.addEventListener('click', () => {
        if (td.textContent==='○') {
          td.textContent = '休';
        } else if (td.textContent==='休') {
          td.textContent = '○';
        };
      });
    };
  }

  function ph(rowId, phId) {//個人の休みをカウントする
    const row = document.getElementById(rowId);
    const td = row.querySelectorAll('td');
    const phValue = document.getElementById(phId);
    let phCount = 0;
    // console.log(td);
    td.forEach(td => td.addEventListener('click', () => {
        if (td.textContent==='○') {
        phCount--;
        phValue.textContent = phCount;
      } else if (td.textContent==='休') {
        phCount++;
        phValue.textContent = phCount;
      };
    }));
  }

  
  function bundling() {
    clearCalender();
    renderTitle();
    getCalender();
    getWeek();
    addCell('row0');
    addCell('row1');
    addCell('row2');
    addCell('row3');
    addCell('row4');
    addCell('row5');
    addCell('row6');
    ph('row0', 'phValue0');
    ph('row1', 'phValue1');
    ph('row2', 'phValue2');
    ph('row3', 'phValue3');
    ph('row4', 'phValue4');
    ph('row5', 'phValue5');
    ph('row6', 'phValue6');
  }

  
   


  document.getElementById('prev').addEventListener('click', () => {
    month--;
    if (month < 0) {
      year--;
      month = 11;
    }
   
    bundling();
  });

  document.getElementById('next').addEventListener('click', () => {
    month++;
    if (month > 11) {
      year++;
      month = 0;
    }
   
    bundling();
  });
  
  bundling();
  
}

試したこと

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

ここにより詳細な情報を記載してください。

nekora

2020/10/08 08:28

CSSも公開してください、同じ見た目で動作を追うことが重要なので、お願いします

nekora

2020/10/08 09:23

質問文は、追記・修正できます。修正してCSSを開示してください

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

回答3件

カレンダーの次月と前月をクリックしたら前のカレンダーが残った状態なってしまいます。
前のカレンダーの表示を削除した上で次月、前月を表示したいです。

したい事とソースの内容が離れている為
上記カレンダー部分のみ修正しました。
(※ただし構文エラーがあちこちにあり、構文は修正しています)

Javascript
1	const date = new Date();
2	let year = date.getFullYear();
3	let month = date.getMonth();
4
5	function clearCalender() { //前のカレンダーを削除
6/* 削除
7		const table = document.querySelector('.table1');
8		while (table.firstChild) {
9			table.removeChild(table.firstChild);
10		}
11*/
12		document.getElementById("calender").innerHTML = '';
13		document.getElementById("week").innerHTML = '';
14		document.getElementById("tbody1").innerHTML = '';
15	}
16
17	function renderTitle() {//年月を表示
18		const title = document.getElementById('title');
19		title.textContent = `${year}/${String(month + 1).padStart(2, '0')}`;
20	}
21
22	function getCalender() {  //日数分のセルを生成しtextContentで日付を入れる
23		const lastDate = new Date(year, month + 1, 0).getDate();
24		for (let i = 1; i <= lastDate; i++) {
25			const tdDate = document.createElement('td');
26			tdDate.textContent = i;
27			document.getElementById('calender').appendChild(tdDate);
28			if (new Date(year, month, i).getDay() === 6) {
29				tdDate.classList.add('sat');
30			}
31			if (new Date(year, month, i).getDay() === 0) {
32				tdDate.classList.add('sun');
33			}
34		}
35	}
36
37	function getWeek() {//当月の曜日を取得しセルを生成
38		const lastDate = new Date(year, month + 1, 0).getDate();
39		for (let n = 1; n <= lastDate; n++) {
40			const tdDay = document.createElement('td');
41			let wObj = ["日", "月", "火", "水", "木", "金", "土"][new Date(year, month, n).getDay()];//指定した日付の曜日を文字列で取得
42			tdDay.textContent = wObj;
43			document.getElementById('week').appendChild(tdDay);
44			if (tdDay.textContent==="土") {
45				tdDay.classList.add('sat');
46			} 
47			if (tdDay.textContent==="日") {
48				tdDay.classList.add('sun');
49			}
50		}
51	}
52
53	function addCell(id) {//シフト用のセルを生成
54		const lastDate = new Date(year, month + 1, 0).getDate();
55		for (let n = 1; n <= lastDate; n++) {
56			const td = document.createElement('td');
57			td.textContent = '○';
58			document.getElementById(id).appendChild(td);
59			td.addEventListener('click', () => {
60				if (td.textContent==='○') {
61					td.textContent = '休';
62				} else if (td.textContent==='休') {
63					td.textContent = '○';
64				}
65			});
66		}
67	}
68
69	function ph(rowId, phId) {//個人の休みをカウントする
70		const row = document.getElementById(rowId);
71		const td = row.querySelectorAll('td');
72		const phValue = document.getElementById(phId);
73		let phCount = 0;
74		// console.log(td);
75		td.forEach(function(item){
76			item.addEventListener('click', () => {
77				if (td.textContent==='○') {
78					phCount--;
79					phValue.textContent = phCount;
80				} else if (td.textContent==='休') {
81					phCount++;
82					phValue.textContent = phCount;
83				};
84			});
85		});
86	}
87
88	function bundling() {
89		clearCalender();
90		renderTitle();
91		getCalender();
92		getWeek();
93		addCell('row0');
94		addCell('row1');
95		addCell('row2');
96		addCell('row3');
97		addCell('row4');
98		addCell('row5');
99		addCell('row6');
100		ph('row0', 'phValue0');
101		ph('row1', 'phValue1');
102		ph('row2', 'phValue2');
103		ph('row3', 'phValue3');
104		ph('row4', 'phValue4');
105		ph('row5', 'phValue5');
106		ph('row6', 'phValue6');
107	}
108
109
110	function init(){
111		document.getElementById('prev').addEventListener('click', () => {
112			month--;
113			if (month < 0) {
114				year--;
115				month = 11;
116			}
117			bundling();
118		});
119
120		document.getElementById('next').addEventListener('click', () => {
121			month++;
122			if (month > 11) {
123				year++;
124				month = 0;
125			}
126			bundling();
127		});
128		bundling();
129	}
130

投稿2020/10/01 05:39

kuma_kuma_

総合スコア2506

nekora

2020/10/08 09:33

申し訳ありません、kuma_kuma様。無断で修正後のスクリプトを引用させていただきました。お気に触りましたら、平にご容赦をお願いします。m(_ _)m

densukeY

2020/10/08 13:32

失礼しました。CSS記載致しました。</tr>気付きませんでした！ありがとうございます。

nekora

2020/10/09 13:23

私が回答した回答を修正し、完全動作版のコードに差し替えて記載してあります。そちらでも、動作確認してください。あとコメントは、各回答ごとに管理されるので、こっちではなく、私の回答の下にコメントを付けるようにしてください。

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

失礼。意味が不明なのですが...

元々CSSが無い状態での質問。
そこで提示された内容で実行したが実行できす原因が構文エラー。よって構文のみ修正。
修正が完了したが、結果および質問内容から行いたいことが不明。

前のカレンダーの表示を削除した上で次月、前月を表示したいです。

そこで理解できた「上記カレンダー部分のみ動作を修正しました。」として回答しました。

HTML上なにも修正していないので、CSSを下さいと言われても
「私はHTMLおよびCSS関して一切変更しない範囲でできる修正しか行っていませんが？」
「CSSは質問者様が持っているもので私に聞かれても回答できません。」
と答えるしかないです。

追記
私の確認ミスで質問者様ではない方の記載と気が付くのが遅れました。
質問者様申し訳ございません。

投稿2020/10/08 09:36

総合スコア2506

2020/10/08 09:43

2020/10/08 09:53

べつに引用自体は構いません。怒ってもいません。ここの回答自体質問者だけが独占できるものでもありませんから（ちなみにここの質問Googleがすぐ拾いますので）でも無いものは無いとしか答えられませんし、質問者様がしたかった事が判らない以上これ以上お答えできないのです。(どちらかといえば困っています。)

nekora

2020/10/08 10:00

そうですか、申し訳ありませんでした。私も質問者さんがCSSを公開してくれてないので、CSSでクリックできるポインターになるであろう所をスクリプトを見ながらここかな？と想像して動作確認をしました。一応、カレンダーはちゃんと変わるようになったのですが、前後の月も表示した3カレンダー形式なのか HTMLからもよく読み解けなかったので困り果てています。

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

ベストアンサー

~~### CSSが提示されていないため、正しく動いているのか判断に迷います。CSSを提示ください~~

CSSが開示されたので動作確認をし、不具合やUIの利便性などを修正してあります。

kuma_kuma様が修正されたスクリプトを加筆修正して使用しています。

HTMLにミスがいくつもあり、具体的には</tr>が必要なところに無い所がたくさんありましたので修正してあります。

あとkuma_kumaさまがinit()関数を定義してくださっているので、ページのロードのタイミングで実行するようにしてあります。
追記：なので用途不明なRUNボタンはコメントアウトしています。

結果、カレンダーは正常に前・後ろに移動しても正しいカレンダーに更新されるようになりました~~が繰り返しますがCSSを提示ください。本当に正しいのかどうか判断できません。~~

~~とりあえず修正したHTMLとkuma_kuma様が修正してくださったスクリプトを載せておきます。~~
~~CSSが開示されたら、再度動作確認をして必要なら修正します。~~

CSSが開示されたので動作確認をし、不具合やUIの利便性などを修正してあります。

以下が修正した、完全動作版のソースコードです。

３つのファイル全てに手を入れてるので全てお持ちのコードと差し替えてください。

html
1<!DOCTYPE html> 
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Shift Creation</title>
7  <link rel="stylesheet" href="css/styles.css">
8</head>
9<body onload="init();">
10  <div class="heading">
11    <span id="prev">&laquo;</span>
12    <h3 id="title" class="thisMonth"></h3>
13    <span id="next">&raquo;</span>
14  </div>
15  <!--<button id="run" class="btn">RUN</button>   onloadでinit()を呼んでいるので用途不明なrunボタンは不要。コメントアウト-->
16  <div class="container" id="_container">
17    <table class="table1">  
18      <thead>
19        <tr id="calender">
20          <th rowspan="2">root</th>
21          <th rowspan="2">name</th>
22        </tr>
23        <tr id="week"></tr>
24      </thead>
25      <tbody id="tbody1">   
26        <tr id="row0">
27          <th>2009</th>
28          <th>yu-ki</th>
29        </tr>
30        <tr id="row1">
31          <th>2010</th>
32          <th>aya</th>
33        </tr>
34        <tr id="row2">
35          <th>2011</th>
36          <th>rino</th>
37        </tr>
38        <tr id="row3">
39          <th>2012</th>
40          <th>den</th>
41        </tr>
42        <tr id="row4">
43          <th>2014</th>
44          <th>petie</th>
45        </tr>
46        <tr id="row5">
47          <th>STR</th>
48          <th>tanaka</th>
49        </tr>
50        <tr id="row6">
51          <th>STR</th>
52          <th>yoshida</th>
53        </tr>
54      </tbody>
55    </table>
56    <table class="table2">
57      <thead>
58        <tr>
59          <th height="60">P.H</th>
60        </tr>
61      </thead>
62      <tbody id="tbody2">
63        <tr id="_row0">
64          <td id="phValue0">0</td>
65        </tr>
66        <tr id="_row1">
67          <td id="phValue1">0</td>
68        </tr>
69        <tr id="_row2">
70          <td id="phValue2">0</td>
71        </tr>
72        <tr id="_row3">
73          <td id="phValue3">0</td>
74        </tr>
75        <tr id="_row4">
76          <td id="phValue4">0</td>
77        </tr>
78        <tr id="_row5">
79          <td id="phValue5">0</td>
80        </tr>
81        <tr id="_row6">
82          <td id="phValue6">0</td>
83        </tr>
84      </tbody>
85    </table>
86  </div>
87  <script src="js/main.js"></script>
88</body>
89</html>

js/main.js

javascript
1    const date = new Date();
2    let year = date.getFullYear();
3    let month = date.getMonth();
4
5    function clearCalender() { //前のカレンダーを削除
6                               //と共に<td>追加前に存在していた要素を追加復元
7        document.getElementById("calender").innerHTML = '';
8        document.getElementById("calender").innerHTML ='<th rowspan="2">root</th><th rowspan="2">name</th>';
9
10        document.getElementById("week").innerHTML = '';
11
12        document.getElementById("tbody1").innerHTML = '';
13        document.getElementById("tbody1").innerHTML = '<tr id="row0"><th>2009</th><th>yu-ki</th></tr><tr id="row1"><th>2010</th><th>aya</th></tr><tr id="row2"><th>2011</th><th>rino</th></tr><tr id="row3"><th>2012</th><th>den</th></tr><tr id="row4"><th>2014</th><th>petie</th></tr><tr id="row5"><th>STR</th><th>tanaka</th></tr><tr id="row6"><th>STR</th><th>yoshida</th></tr>';
14    }
15
16    function renderTitle() {//年月を表示
17        const title = document.getElementById('title');
18        title.textContent = `${year}/${String(month + 1).padStart(2, '0')}`;
19    }
20
21    function getCalender() {  //日数分のセルを生成しtextContentで日付を入れる
22        const lastDate = new Date(year, month + 1, 0).getDate();
23        for (let i = 1; i <= lastDate; i++) {
24            const tdDate = document.createElement('td');
25            tdDate.textContent = i;
26            document.getElementById('calender').appendChild(tdDate);
27            if (new Date(year, month, i).getDay() === 6) {
28                tdDate.classList.add('sat');
29            }
30            if (new Date(year, month, i).getDay() === 0) {
31                tdDate.classList.add('sun');
32            }
33        }
34    }
35
36    function getWeek() {//当月の曜日を取得しセルを生成
37        const lastDate = new Date(year, month + 1, 0).getDate();
38        for (let n = 1; n <= lastDate; n++) {
39            const tdDay = document.createElement('td');
40            let wObj = ["日", "月", "火", "水", "木", "金", "土"][new Date(year, month, n).getDay()];//指定した日付の曜日を文字列で取得
41            tdDay.textContent = wObj;
42            document.getElementById('week').appendChild(tdDay);
43            if (tdDay.textContent==="土") {
44                tdDay.classList.add('sat');
45            } 
46            if (tdDay.textContent==="日") {
47                tdDay.classList.add('sun');
48            }
49        }
50    }
51
52    function addCell(id) {//シフト用のセルを生成
53        const lastDate = new Date(year, month + 1, 0).getDate();
54        for (let n = 1; n <= lastDate; n++) {
55            const td = document.createElement('td');
56            td.textContent = '○';
57            document.getElementById(id).appendChild(td);
58            td.addEventListener('click', () => {
59                if (td.textContent==='○') {
60                    td.textContent = '休';
61                } else if (td.textContent==='休') {
62                    td.textContent = '○';
63                }
64            });
65        }
66    }
67
68    function ph(rowId, phId) {//個人の休みをカウントする
69        const row = document.getElementById(rowId);
70        const td = row.querySelectorAll('td');
71        const phValue = document.getElementById(phId);
72        let phCount = 0;
73        // console.log(td);
74        td.forEach(function(item){
75            item.addEventListener('click', () => { //tdはquerySelectorAllで複数個になっててforEachで要素１こをitemとして
76                if (item.textContent==='○') {      //もらっているのでif文はitem.textContentを見ないといけない
77                    phCount--;
78                    phValue.textContent = phCount;
79                } else if (item.textContent==='休') {
80                    phCount++;
81                    phValue.textContent = phCount;
82                };
83            });
84        });
85    }
86
87    function resetPh() { // これが無いと月が替わったとき休みの数がどこかクリックするまで、前の値で残るバグがでる
88        let phValue = document.getElementById('phValue0');
89        phValue.textContent = 0;
90        phValue = document.getElementById('phValue1');
91        phValue.textContent = 0;
92        phValue = document.getElementById('phValue2');
93        phValue.textContent = 0;
94        phValue = document.getElementById('phValue3');
95        phValue.textContent = 0;
96        phValue = document.getElementById('phValue4');
97        phValue.textContent = 0;
98        phValue = document.getElementById('phValue5');
99        phValue.textContent = 0;
100        phValue = document.getElementById('phValue6');
101        phValue.textContent = 0;
102    }
103
104    function bundling() {
105        clearCalender();
106        renderTitle();
107        getCalender();
108        getWeek();
109        addCell('row0');
110        addCell('row1');
111        addCell('row2');
112        addCell('row3');
113        addCell('row4');
114        addCell('row5');
115        addCell('row6');
116        resetPh();
117        ph('row0', 'phValue0');
118        ph('row1', 'phValue1');
119        ph('row2', 'phValue2');
120        ph('row3', 'phValue3');
121        ph('row4', 'phValue4');
122        ph('row5', 'phValue5');
123        ph('row6', 'phValue6');
124    }
125
126
127    function init(){
128        document.getElementById('prev').addEventListener('click', () => {
129            month--;
130            if (month < 0) {
131                year--;
132                month = 11;
133            }
134            bundling();
135        });
136
137        document.getElementById('next').addEventListener('click', () => {
138            month++;
139            if (month > 11) {
140                year++;
141                month = 0;
142            }
143            bundling();
144        });
145        bundling();
146    }

css/styles.css

css
1body {
2    margin: 0;
3  }
4  
5  .container {
6    display: flex;
7    justify-content: center;
8  }
9  
10  .table1 {
11    width: 80%;
12  }
13  
14  .thisMonth  {
15  text-align: center;
16  margin: 40px auto;
17  }
18  
19  .sat {
20    background-color: skyblue;
21  }
22  
23  .sun {
24    background-color: tomato;
25  }
26  
27  #prev,
28  #next {
29    display: block;
30    margin: auto;
31    padding: 10px; /* 押しづらいのでpaddingで押せる領域を広げてやる */
32    border: 1px solid black;
33    cursor: pointer;
34  } 
35  
36  /* 押せる範囲に入ったら背景色を変えて教えてやると使い勝手が上がる */
37  #prev:hover,
38  #next:hover {
39    background-color: yellow;
40  }
41  
42  .heading {
43    display: flex;
44  }
45  
46  .header {
47    font-weight: bold;
48  }
49  
50  .btn {
51    margin-left: 150px;
52    margin-bottom: 20px;
53  }
54  
55  table,
56  th,
57  tr,
58  td {
59    border-collapse: collapse;
60    border: 2px solid #333;
61  }
62  
63  td {
64    width: 53px;
65    height: 28px;
66    text-align: center;
67  }
68
69  td:not([id^="phValue"]):hover { /* 要素を選択ホバーしていることを明示して日付の押し間違いを防ぐ */
70    background-color: yellow;
71  }
72
73  #run {
74    cursor: pointer;
75  }
76  
77  #run:hover {
78    opacity: 0.5;
79  }
80  
81  tbody tr td {
82    cursor: pointer;
83    user-select: none;
84  }