回答編集履歴

説明文に3ファイルとも修正した旨記載を追加

2020/10/10 03:40

投稿

nekora

スコア501

test CHANGED Viewed

@@ -32,6 +32,8 @@
 ### 以下が修正した、完全動作版のソースコードです。
+**３つのファイル全てに手を入れてるので全てお持ちのコードと差し替えてください。**
 ```html

CSSの更新

2020/10/10 03:40

投稿

nekora

スコア501

test CHANGED Viewed

@@ -524,165 +524,171 @@
 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;
-  padding: 10px; /* 押しづらいのでpaddingで押せる領域を広げてやる */
-  border: 1px solid black;
-  cursor: pointer;
-}
-/* 押せる範囲に入ったら背景色を変えて教えてやると使い勝手が上がる */
-#prev:hover,
-#next:hover {
-  background-color: yellow;
-}
-.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;
+    margin: 0;
+  }
+  .container {
+    display: flex;
+    justify-content: center;
+  }
+  .table1 {
+    width: 80%;
+  }
+  .thisMonth  {
   text-align: center;
-}
-#run {
-  cursor: pointer;
-}
-#run:hover {
-  opacity: 0.5;
-}
-tbody tr td {
-  cursor: pointer;
-  user-select: none;
-}
+  margin: 40px auto;
+  }
+  .sat {
+    background-color: skyblue;
+  }
+  .sun {
+    background-color: tomato;
+  }
+  #prev,
+  #next {
+    display: block;
+    margin: auto;
+    padding: 10px; /* 押しづらいのでpaddingで押せる領域を広げてやる */
+    border: 1px solid black;
+    cursor: pointer;
+  }
+  /* 押せる範囲に入ったら背景色を変えて教えてやると使い勝手が上がる */
+  #prev:hover,
+  #next:hover {
+    background-color: yellow;
+  }
+  .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;
+  }
+  td:not([id^="phValue"]):hover { /* 要素を選択ホバーしていることを明示して日付の押し間違いを防ぐ */
+    background-color: yellow;
+  }
+  #run {
+    cursor: pointer;
+  }
+  #run:hover {
+    opacity: 0.5;
+  }
+  tbody tr td {
+    cursor: pointer;
+    user-select: none;
+  }
 ```

説明の追記

2020/10/10 00:06

投稿

nekora

スコア501

test CHANGED Viewed

@@ -689,3 +689,9 @@
 以上です。動作確認済みですが、問題があればコメントをつけて下さい。出来る限り対応します。
+**コードブロックは右上のアイコンをクリックすれば全コピー出来ます。
+コピーして利用してください。**

CSSが開示されたので動作する物が完成したので記述差し替え

2020/10/09 12:12

投稿

nekora

スコア501

test CHANGED Viewed

@@ -1,8 +1,10 @@
-### CSSが提示されていないため、正しく動いているのか判断に迷います。CSSを提示ください
+~~### CSSが提示されていないため、正しく動いているのか判断に迷います。CSSを提示ください~~
+### CSSが開示されたので動作確認をし、不具合やUIの利便性などを修正してあります。
-kuma_kuma様が修正されたスクリプトを使用しています。
+kuma_kuma様が修正された**スクリプトを加筆修正**して使用しています。
@@ -12,15 +14,23 @@
 あとkuma_kumaさまが```init()```関数を定義してくださっているので、ページのロードのタイミングで実行するようにしてあります。
+　**追記：なので用途不明なRUNボタンはコメントアウトしています。**
-結果、カレンダーは正常に前・後ろに移動しても正しいカレンダーに更新されるようになりましたが
+結果、カレンダーは正常に前・後ろに移動しても正しいカレンダーに更新されるようになりました~~が繰り返しますがCSSを提示ください。本当に正しいのかどうか判断できません。~~
-繰り返しますがCSSを提示ください。本当に正しいのかどうか判断できません。
-とりあえず修正したHTMLとkuma_kuma様が修正してくださったスクリプトを載せておきます。
+~~とりあえず修正したHTMLとkuma_kuma様が修正してくださったスクリプトを載せておきます。~~
-CSSが開示されたら、再度動作確認をして必要なら修正します。
+~~CSSが開示されたら、再度動作確認をして必要なら修正します。~~
+### CSSが開示されたので動作確認をし、不具合やUIの利便性などを修正してあります。
+### 以下が修正した、完全動作版のソースコードです。
@@ -54,7 +64,7 @@
   </div>
-  <button id="run" class="btn">RUN</button>
+  <!--<button id="run" class="btn">RUN</button>   onloadでinit()を呼んでいるので用途不明なrunボタンは不要。コメントアウト-->
   <div class="container" id="_container">
@@ -204,8 +214,6 @@
 </html>
 ```
@@ -224,252 +232,460 @@
     function clearCalender() { //前のカレンダーを削除
-/* 削除
-        const table = document.querySelector('.table1');
-        while (table.firstChild) {
-            table.removeChild(table.firstChild);
+                               //と共に<td>追加前に存在していた要素を追加復元
+        document.getElementById("calender").innerHTML = '';
+        document.getElementById("calender").innerHTML ='<th rowspan="2">root</th><th rowspan="2">name</th>';
+        document.getElementById("week").innerHTML = '';
+        document.getElementById("tbody1").innerHTML = '';
+        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>';
+    }
+    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');
+            }
         }
-*/
-        document.getElementById("calender").innerHTML = '';
-        document.getElementById("week").innerHTML = '';
-        document.getElementById("tbody1").innerHTML = '';
-    }
+    }
-    function renderTitle() {//年月を表示
+    function getWeek() {//当月の曜日を取得しセルを生成
-        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++) {
+        for (let n = 1; n <= lastDate; n++) {
-            const tdDate = document.createElement('td');
+            const tdDay = document.createElement('td');
+            let wObj = ["日", "月", "火", "水", "木", "金", "土"][new Date(year, month, n).getDay()];//指定した日付の曜日を文字列で取得
-            tdDate.textContent = i;
+            tdDay.textContent = wObj;
-            document.getElementById('calender').appendChild(tdDate);
+            document.getElementById('week').appendChild(tdDay);
-            if (new Date(year, month, i).getDay() === 6) {
+            if (tdDay.textContent==="土") {
-                tdDate.classList.add('sat');
+                tdDay.classList.add('sat');
+            }
+            if (tdDay.textContent==="日") {
+                tdDay.classList.add('sun');
             }
+        }
+    }
+    function addCell(id) {//シフト用のセルを生成
-            if (new Date(year, month, i).getDay() === 0) {
+        const lastDate = new Date(year, month + 1, 0).getDate();
+        for (let n = 1; n <= lastDate; n++) {
+            const td = document.createElement('td');
-                tdDate.classList.add('sun');
+            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(function(item){
+            item.addEventListener('click', () => { //tdはquerySelectorAllで複数個になっててforEachで要素１こをitemとして
+                if (item.textContent==='○') {      //もらっているのでif文はitem.textContentを見ないといけない
+                    phCount--;
+                    phValue.textContent = phCount;
+                } else if (item.textContent==='休') {
+                    phCount++;
+                    phValue.textContent = phCount;
+                };
+            });
+        });
+    }
+    function resetPh() { // これが無いと月が替わったとき休みの数がどこかクリックするまで、前の値で残るバグがでる
+        let phValue = document.getElementById('phValue0');
+        phValue.textContent = 0;
+        phValue = document.getElementById('phValue1');
+        phValue.textContent = 0;
+        phValue = document.getElementById('phValue2');
+        phValue.textContent = 0;
+        phValue = document.getElementById('phValue3');
+        phValue.textContent = 0;
+        phValue = document.getElementById('phValue4');
+        phValue.textContent = 0;
+        phValue = document.getElementById('phValue5');
+        phValue.textContent = 0;
+        phValue = document.getElementById('phValue6');
+        phValue.textContent = 0;
+    }
+    function bundling() {
+        clearCalender();
+        renderTitle();
+        getCalender();
+        getWeek();
+        addCell('row0');
+        addCell('row1');
+        addCell('row2');
+        addCell('row3');
+        addCell('row4');
+        addCell('row5');
+        addCell('row6');
+        resetPh();
+        ph('row0', 'phValue0');
+        ph('row1', 'phValue1');
+        ph('row2', 'phValue2');
+        ph('row3', 'phValue3');
+        ph('row4', 'phValue4');
+        ph('row5', 'phValue5');
+        ph('row6', 'phValue6');
+    }
+    function init(){
+        document.getElementById('prev').addEventListener('click', () => {
+            month--;
+            if (month < 0) {
+                year--;
+                month = 11;
             }
+            bundling();
-        }
+        });
-    }
-    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);
+        document.getElementById('next').addEventListener('click', () => {
+            month++;
-            if (tdDay.textContent==="土") {
+            if (month > 11) {
-                tdDay.classList.add('sat');
+                year++;
-            }
-            if (tdDay.textContent==="日") {
+                month = 0;
-                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(function(item){
-            item.addEventListener('click', () => {
-                if (td.textContent==='○') {
-                    phCount--;
+            bundling();
-                    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');
-    }
-    function init(){
-        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();
     }
 ```
+css/styles.css
+```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;
+  padding: 10px; /* 押しづらいのでpaddingで押せる領域を広げてやる */
+  border: 1px solid black;
+  cursor: pointer;
+}
+/* 押せる範囲に入ったら背景色を変えて教えてやると使い勝手が上がる */
+#prev:hover,
+#next:hover {
+  background-color: yellow;
+}
+.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;
+}
+```
+以上です。動作確認済みですが、問題があればコメントをつけて下さい。出来る限り対応します。

タイプミスの修正

2020/10/09 11:54

投稿

nekora

スコア501

test CHANGED Viewed

@@ -210,7 +210,7 @@
-js/main,js
+js/main.js
 ```javascript