🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1088閲覧

javaScript  加算していく

yoshi.R

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/11/21 22:39

編集2019/11/21 23:39

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/11/21 22:45

意味ないってどういうことでしょうか。 手元で再現確認しようにもgetItemしかないのでなんとも。 要件部分も文章が若干おかしいのでもうすこししっかり書いてください。
Zuishin

2019/11/21 22:46

意味ないなら、現状で良いわけがないのでは? 意味ないコードからは何がしたいのかわからないので、日本語で中学生にもわかるよう詳しく丁寧に説明してください。
kyoya0819

2019/11/21 22:48 編集

意味不明 何をしたいんですか?もうすこし、詳しくわかりやすくお願いします。
Zuishin

2019/11/21 22:48 編集

とりあえずここから。 > 動的に作ったID とは何ですか? どこでどのように作っていますか? 変数名とは違いますか? > (set_num)は数値ですのでそれを加算していきたい。 これは何の数値ですか?
yoshi.R

2019/11/21 23:41

編集しました。 Zuishin様 返信ありがとうございます。 > 動的に作ったID 110行目あたりです。 ==これは何の数値ですか? 日毎にlocalStrageに保存した値です。
m.ts10806

2019/11/22 00:21 編集

>見にくいコード インデントきっちり揃えるのと行間を空けすぎないようにする くらいで多少読みやすくなると思います。 同じ階層のコードのインデントが合ってないのはかなり可読性に影響してきます。
azuapricot

2019/11/22 00:51

最初のうちって行間空けた方が読みやすいじゃーんと思う人が多いイメージですが 行間が空きすぎているコードもインデントがそろってないコードなみにはよみにくい・・・
m.ts10806

2019/11/22 01:48

azuapricotさん 「程よさ」って大事ですね。 道路も広すぎると逆に事故が起きやすくなったりします。
guest

回答1

0

ベストアンサー

とりあえずこれで動きました。どこが違うか見比べてください。

JavaScript

1window.onload = function () { 2 const date = new Date(); //今日の日付 3 const year = date.getFullYear(); 4 console.log(year) 5 const month = date.getMonth() + 1; //10(返される値)+1 6 console.log(month) 7 const d = new Date(year, month, 0).getDate(); 8 console.log(d) 9 10 let set_num = 0; 11 for (let len = 1; len < d + 1; len++) { 12 var overvalue = (localStorage.getItem(year.toString() + month.toString() + len.toString() + 'dayoverTime')); 13 set_num += Number(overvalue); 14 } 15 this.console.log(set_num); 16 17 const element_sum = document.getElementById('201912_sum'); 18 element_sum.innerHTML = set_num; 19 20};

投稿2019/11/22 00:53

Zuishin

総合スコア28669

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshi.R

2019/11/22 03:40

肝心な回答がない人が多い中、的確な回答ありがとうございます。 thisを学びます。
Zuishin

2019/11/22 04:01

いえ、this は私が使っているエディタの補完機能で出てきたものを修正無しで使っているだけで、無くても問題ありません。console.log はデバッグ用なのでこれらは全部外して大丈夫です。 肝心なところはそこではありませんし、修正依頼で言われていることも大切なことなので、聞き流さないようにしてください。
yoshi.R

2019/11/22 22:37

もちろんです。 set_num += Number(overvalue); の部分は、自分でもやってみたのですがスペルミスでした。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問