回答編集履歴

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

2020/10/10 03:40

投稿

nekora

スコア501

answer CHANGED Viewed

@@ -15,6 +15,7 @@
 ### CSSが開示されたので動作確認をし、不具合やUIの利便性などを修正してあります。
 ### 以下が修正した、完全動作版のソースコードです。
+**３つのファイル全てに手を入れてるので全てお持ちのコードと差し替えてください。**
 ```html
 <!DOCTYPE html>

CSSの更新

2020/10/10 03:40

投稿

nekora

スコア501

answer CHANGED Viewed

@@ -261,86 +261,89 @@
 css/styles.css
 ```css
 body {
-  margin: 0;
+    margin: 0;
-}
+  }
-.container {
+  .container {
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-}
+  }
-.table1 {
+  .table1 {
-  width: 80%;
+    width: 80%;
-}
+  }
-.thisMonth  {
+  .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;
+  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 {
+  td:not([id^="phValue"]):hover { /* 要素を選択ホバーしていることを明示して日付の押し間違いを防ぐ */
-  cursor: pointer;
+    background-color: yellow;
-}
+  }
+  #run {
+    cursor: pointer;
+  }
-#run:hover {
+  #run:hover {
-  opacity: 0.5;
+    opacity: 0.5;
-}
+  }
-tbody tr td {
+  tbody tr td {
-  cursor: pointer;
+    cursor: pointer;
-  user-select: none;
+    user-select: none;
-}
+  }
 ```
 以上です。動作確認済みですが、問題があればコメントをつけて下さい。出来る限り対応します。

説明の追記

2020/10/10 00:06

投稿

nekora

スコア501

answer CHANGED Viewed

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

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

2020/10/09 12:12

投稿

nekora

スコア501

answer CHANGED Viewed

@@ -1,16 +1,21 @@
-### CSSが提示されていないため、正しく動いているのか判断に迷います。CSSを提示ください
+~~### CSSが提示されていないため、正しく動いているのか判断に迷います。CSSを提示ください~~
+### CSSが開示されたので動作確認をし、不具合やUIの利便性などを修正してあります。
-kuma_kuma様が修正されたスクリプトを使用しています。
+kuma_kuma様が修正された**スクリプトを加筆修正**して使用しています。
 HTMLにミスがいくつもあり、具体的には```</tr>```が必要なところに無い所がたくさんありましたので修正してあります。
 あとkuma_kumaさまが```init()```関数を定義してくださっているので、ページのロードのタイミングで実行するようにしてあります。
-結果、カレンダーは正常に前・後ろに移動しても正しいカレンダーに更新されるようになりましたが
-繰り返しますがCSSを提示ください。本当に正しいのかどうか判断できません。
+　**追記：なので用途不明なRUNボタンはコメントアウトしています。**
-とりあえず修正したHTMLとkuma_kuma様が修正してくださったスクリプトを載せておきます。
+結果、カレンダーは正常に前・後ろに移動しても正しいカレンダーに更新されるようになりました~~が繰り返しますがCSSを提示ください。本当に正しいのかどうか判断できません。~~
-CSSが開示されたら、再度動作確認をして必要なら修正します。
+~~とりあえず修正したHTMLとkuma_kuma様が修正してくださったスクリプトを載せておきます。~~
+~~CSSが開示されたら、再度動作確認をして必要なら修正します。~~
+### CSSが開示されたので動作確認をし、不具合やUIの利便性などを修正してあります。
+### 以下が修正した、完全動作版のソースコードです。
 ```html
 <!DOCTYPE html>
 <html lang="ja">
@@ -26,7 +31,7 @@
     <h3 id="title" class="thisMonth"></h3>
     <span id="next">&raquo;</span>
   </div>
-  <button id="run" class="btn">RUN</button>
+  <!--<button id="run" class="btn">RUN</button>   onloadでinit()を呼んでいるので用途不明なrunボタンは不要。コメントアウト-->
   <div class="container" id="_container">
     <table class="table1">
       <thead>
@@ -101,7 +106,6 @@
   <script src="js/main.js"></script>
 </body>
 </html>
 ```
 js/main.js
@@ -111,15 +115,14 @@
     let month = date.getMonth();
     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() {//年月を表示
@@ -181,11 +184,11 @@
         let phCount = 0;
         // console.log(td);
         td.forEach(function(item){
-            item.addEventListener('click', () => {
+            item.addEventListener('click', () => { //tdはquerySelectorAllで複数個になっててforEachで要素１こをitemとして
-                if (td.textContent==='○') {
+                if (item.textContent==='○') {      //もらっているのでif文はitem.textContentを見ないといけない
                     phCount--;
                     phValue.textContent = phCount;
-                } else if (td.textContent==='休') {
+                } else if (item.textContent==='休') {
                     phCount++;
                     phValue.textContent = phCount;
                 };
@@ -193,6 +196,23 @@
         });
     }
+    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();
@@ -205,6 +225,7 @@
         addCell('row4');
         addCell('row5');
         addCell('row6');
+        resetPh();
         ph('row0', 'phValue0');
         ph('row1', 'phValue1');
         ph('row2', 'phValue2');
@@ -235,4 +256,91 @@
         });
         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

answer CHANGED Viewed

@@ -104,7 +104,7 @@
 ```
-js/main,js
+js/main.js
 ```javascript
     const date = new Date();
     let year = date.getFullYear();