javaScript 　加算していく

javaScript 　### 数値を加算していく

見にくいコードですみません。

練習でjavaScriptやってます。

javaScriptのコード最後のwindow.onload時に、
forで動的に作ったID（１１０行目あたり）のついた値（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まで　インクリメント ７日で繰り返す
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

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さん「程よさ」って大事ですね。道路も広すぎると逆に事故が起きやすくなったりします。

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

回答1件

ベストアンサー

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

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

総合スコア28660

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); の部分は、自分でもやってみたのですがスペルミスでした。ありがとうございます。

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