javaScript ### 数値を加算していく
見にくいコードですみません。
練習でjavaScriptやってます。
javaScriptのコード最後のwindow.onload時に、
forで動的に作ったID(110行目あたり)のついた値(localStrageに保存した値(値は(set_num)数値)を取得して、それを月毎合計値を最終的には 表示したいです。
日にちに保存した数値の合計方法がわかりません。
よろしくお願いします。
HTML
1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"/> 6 <link rel="stylesheet" type="text/css" href="style3.css"> 7 <script language="javascript" type="text/javascript"></script> 8 </head> 9 10 <body> 11 <button id="prev" type="button">前の月</button> 12 <button id="next" type="button">次の月</button> 13 <div id = "calendar"></div> 14 <script src="main3.js"></script> 15 </body> 16 17</html>
css
1 2 3 4 5#calendar { 6 height: 600px; 7 8 margin: 100px 0px 100px 0px; 9} 10 11 12 13 14 15h2 { 16 font-size: 50px; 17 text-align: center; 18 color: skyblue; 19} 20 21table { 22 border-spacing: 0; 23 border-collapse: collapse; 24 margin-left: 100px; 25 margin-right: 100px; 26} 27 28td { 29 border: 1px solid #ddd; 30 padding: 10px; 31 font-size: 40px; 32 text-align: center; 33} 34 35td:first-child { 36 color: red; 37} 38 39td:last-child { 40 color: royalblue; 41} 42 43td.is-disabled { 44 color: #ccc; 45} 46 47 48.is-today { 49color: red; 50} 51 52 53.item { 54 background-color: #8ad3e3b3; 55} 56 57button#prev,#next { 58 font-size: 60px; 59 margin-right: 200px; 60 margin-top: 100px; 61 text-align: center; 62 color: #7a7f8b; 63} 64 65input { 66 width: 200px; 67 height: 60px; 68 margin-bottom: 10px; 69 text-align: center; 70 font-size: 40px; 71} 72 73 74p { 75 font-size: 50px; 76 margin-left: 80%; 77}
javaScript
1 2 3 4 5const weeks = ['日', '月', '火', '水', '木', '金', '土'] 6const date = new Date(); //今日の日付 7let year = date.getFullYear(); 8 //console.log(year) 9let month = date.getMonth() + 1; //10(返される値)+1 10 //console.log(month) 11 12const config = { 13 show: 3, 14}; 15 16 17 18 19function showCalendar(year, month) { 20 for ( i = 0; i < config.show; i++) { 21 22 const calendarHtml = createCalendar(year, month) 23 const sec = document.createElement('section') 24 25 sec.innerHTML = calendarHtml 26 document.querySelector('#calendar').appendChild(sec) 27 month++ 28 if (month > 12) { 29 year++ 30 month = 1 31 } 32 } 33}; 34 35 36 37 38 39 40 41 42 43 44//--------------------------------------------------------------------- 45function createCalendar(year, month) { 46 47 const startDate = new Date(year, month - 1, 1) 48 const endDate = new Date(year, month, 0) // 月の最後の日を取得 49 const endDayCount = endDate.getDate() // 月の末日 50 let year1 = date.getFullYear(); 51 let now = new Date(); 52 const todaymonth = now.getMonth() + 1; 53 const lastMonthEndDate = new Date(year,month - 1,0) // 前月の最後の日の情報 54 const lastMonthendDayCount = lastMonthEndDate.getDate() // 前月の末日 55 const startDay = startDate.getDay() // 月の最初の日の曜日を取得 56 57 let dayCount = 1 // 日にちのカウント 58 let calendarHtml = '' // HTMLを組み立てる変数 59 60 61 calendarHtml += '<h2>' + year + '/' + month + '</h2>' 62 63 64 65 calendarHtml += '<table id=month_id'+ year + month + '>'+ '<p id=' + year + month + '_sum>' + '合計' + '</p>' + '<tbody>' 66 67 68 69 // 曜日の行を作成 70 for (let i = 0; i < weeks.length; i++) { 71 72 calendarHtml += '<td>' + weeks[i] + '</td>' 73 }; 74 75 76 77 78//ここからカレンダー作成 79//--------------------------------------------------------------------- 80for (let w = 0; w < 6; w++) { 81 82 calendarHtml += '<tr>' 83 84 for (let d = 0; d < 7; d++) { //0~6まで インクリメント 7日で繰り返す 85 86 if (w == 0 && d < startDay) { //wが0かつ5より小さいとき空 87 // 1行目で1日の曜日の前 88 89 let num = lastMonthendDayCount - startDay + d + 1 90 91 calendarHtml += '<td class="is-disabled">' + num + '</td>' 92 93 94 } else if (dayCount > endDayCount) { 95 // 末尾の日数を超えた 96 97 98 let num = dayCount - endDayCount 99 calendarHtml += '<td class="is-disabled">' + num + '</td>' 100 dayCount++ 101 102 } else { 103 let year1 = date.getFullYear(); 104 const startDate2 = new Date(year, month - 1, 1) 105 const startDay2 = startDate2.getDay() // 月の最初の日の曜日を取得 106 const todays2 = date.getDate(); 107 let today_month2 = date.getMonth() + 1; 108 let today_c2 = (6+todays2 + startDay2) 109 110 calendarHtml += `<td id= `+ `"` + year1 + today_month2 + dayCount + `"` + ` ` + `class="calendar_td"` + 111 `daylength=${dayCount}>${dayCount}`+ 112 '<br>' 113 + '<input id="' + year1 + todaymonth + dayCount +'day_save"' + 'type = "text" name="" value=""' + ' >' + 114 '<br/> '+ 115 '<input id="' + year1 + todaymonth + dayCount +'dayoverTime"' + 'type = "number" name="in" step="0.5" value=""' + ' >' + 116 '<br/> ' 117 +' <input id="' + year1 + todaymonth + dayCount +'dayoverTime"'+' onclick="load_click(this.id);" class="btn1" type="button" value="読込" onclick="load();"/>'+ 118 ' <input id="' + year1 + todaymonth + dayCount +'day"'+' class="btn2" type="button" value="保存" onclick="reply_click(this.id);save()"/>'+ 119 ' <br/><br/>'+ 120 ' <button type="button" class="btn btn-primary btn-block" id="' + year1 + todaymonth + dayCount +'dayoverTime"' + 'onclick="reset_click(this.id);">リセット</button>' + '</td>' 121 dayCount++ 122 } 123 } 124 calendarHtml += '</tr>' 125}; 126 127//ここまでカレンダー作成 128//--------------------------------------------------------------------- 129 130 const todays = date.getDate(); 131 let today_month = date.getMonth() + 1; 132 let today_c = (5+todays+startDay) 133 const year_index = '<h2>' + year + '/' + (month-1) + '</h2>' 134 135 136 if(year_index == '<h2>' + year + '/' + today_month + '<h2>' ) { 137 138 let cl = document.getElementsByTagName("td"); 139 cl[today_c].classList.add('item'); 140}; 141//--------------------------------------------------------------------- 142 143 144calendarHtml += '</tbody>' + '</table>' 145 146return calendarHtml //ここまでの処理結果を下のshowCalendarに返す 147 148}; 149//--------------------------------------------------------------------- 150 151 152 153 154 155function moveCalendar(e) { 156 document.querySelector('#calendar').innerHTML = '' 157 158 if (e.target.id === 'prev') { 159 month-- 160 161 if (month < 1) { 162 year-- 163 month = 12 164 } 165 } 166 167 if (e.target.id === 'next') { 168 month++ 169 170 if (month > 12) { 171 year++ 172 month = 1 173 } 174 } 175 176 showCalendar(year, month) 177}; 178 179 180 181 182 183 184document.querySelector('#prev').addEventListener('click', moveCalendar) 185document.querySelector('#next').addEventListener('click', moveCalendar) 186 187showCalendar(year, month); 188 189 190 191 192 193 194 195 196 window.onload = function (){ 197 let ret = document.getElementById("month_id"+ year1 +month) 198 .getElementsByTagName("td") 199 [today_c2].classList.add("item"); 200 }; 201 202 203 204 205 // 保存 id 201911day 206 function reply_click(clicked_id) 207 { 208 //alert(clicked_id); 209 let num_day = (clicked_id); 210 211 console.log(num_day); 212 213 save(num_day); 214 215 }; 216 217 218 219 // 保存 220 function save(num_day) { 221 222 let mydata = document.getElementById(num_day+'overTime').value; 223 document.getElementById(num_day+'_save').value = mydata 224 console.log(mydata); 225 localStorage.setItem(num_day+'overTime', mydata); 226 227 }; 228 229 230 231 232 233 // 読込 id 201911dayoverTime 234 function load_click(clicked_id){ 235 //alert(clicked_id); 236 let load_data = (clicked_id); 237 load(load_data); 238 }; 239 240 241 242 // 読込 243 244 function load(load_data) { 245 let memo = 'メモ書きは,'; 246 let mydata = ""; 247 248 249 if (!localStorage.getItem(load_data)) { 250 mydata = "データがありません"; 251 console.log(`mydata= ${mydata}`); 252 } else { 253 mydata = load_data + '=' + localStorage.getItem(load_data); 254 console.log(`mydata= ${mydata}`); 255 var str = mydata; 256 console.log(str); 257 258 } 259 } 260 261 262 263 264 265 //リセット 266 267 function reset_click(clicked_id){ 268 console.log(clicked_id); 269 270 if (!localStorage.getItem(clicked_id)) { 271 r_mydata = "データがありません"; 272 console.log(r_mydata); 273 } else { 274 r_mydata = clicked_id + '=' + localStorage.getItem(clicked_id); 275 console.log(r_mydata); 276 localStorage.removeItem(clicked_id,r_mydata); 277 console.log(clicked_id); 278 } 279 } 280 281 282 283 284 285 286 window.onload = function() { 287 const date = new Date(); //今日の日付 288 const year = date.getFullYear(); 289 console.log(year) 290 const month = date.getMonth() + 1; //10(返される値)+1 291 console.log(month) 292 const d = new Date(year, month, 0).getDate(); 293 console.log(d) 294 295 for (let len = 0; len < d+1; len++){ 296 var overvalue = (localStorage.getItem(year.toString()+month.toString()+len.toString()+'dayoverTime')); 297 var set_num = Number(overvalue); 298 } 299 300 const element_sum = document.getElementById('201911_sum'); 301 element_sum.innerHTML = set_num; 302 303 }; 304
意味ないってどういうことでしょうか。
手元で再現確認しようにもgetItemしかないのでなんとも。
要件部分も文章が若干おかしいのでもうすこししっかり書いてください。
意味ないなら、現状で良いわけがないのでは?
意味ないコードからは何がしたいのかわからないので、日本語で中学生にもわかるよう詳しく丁寧に説明してください。
意味不明
何をしたいんですか?もうすこし、詳しくわかりやすくお願いします。
とりあえずここから。
> 動的に作ったID
とは何ですか?
どこでどのように作っていますか?
変数名とは違いますか?
> (set_num)は数値ですのでそれを加算していきたい。
これは何の数値ですか?
編集しました。
Zuishin様 返信ありがとうございます。
> 動的に作ったID
110行目あたりです。
==これは何の数値ですか?
日毎にlocalStrageに保存した値です。
>見にくいコード
インデントきっちり揃えるのと行間を空けすぎないようにする
くらいで多少読みやすくなると思います。
同じ階層のコードのインデントが合ってないのはかなり可読性に影響してきます。
最初のうちって行間空けた方が読みやすいじゃーんと思う人が多いイメージですが
行間が空きすぎているコードもインデントがそろってないコードなみにはよみにくい・・・
azuapricotさん
「程よさ」って大事ですね。
道路も広すぎると逆に事故が起きやすくなったりします。
回答1件
あなたの回答
tips
プレビュー