回答編集履歴
2
文章表現を修正
answer
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
0. `localStorage.setItem("count1" , document.getElementById("dayCount").innerHTML);`を実行。
|
|
37
37
|
`<div id="dayCount"></div>`内の`innerHTML`の値（この時点では空文字列となる値）を、LocalStorageに`count1`キーと関連付けて保存。
|
|
38
38
|
0. `window.onload`に関数を設定。
|
|
39
|
-
0. ページ読み込みが完了し、`window.onload`に設定した関数
|
|
39
|
+
0. ページ読み込みが完了し、`window.onload`に設定した関数が実行される。
|
|
40
40
|
0. `var count_load = localStorage.getItem("count1");`を実行。
|
|
41
41
|
LocalStorageに`count1`キーと関連付けて保存した値（空文字列）を取り出し、変数`count_load`に代入。
|
|
42
42
|
0. `document.getElementById("dayCount").innerHTML = count_load;`を実行。
|
1
改めて読みなおしたところ、分かりにくいと感じた表現や文章を修正
answer
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
0. `document.getElementById("dayCount").innerHTML = count_load;`を実行。
|
|
43
43
|
`<div id="dayCount"></div>`内の`innerHTML`の値を、変数`count_load`の値（空文字列）に変更。
|
|
44
44
|
|
|
45
|
-
このうち、カウントに使用されている変数`count1`は、1番目と3番目の処理、
|
|
45
|
+
このうち、カウントに使用されている（と思われる）変数`count1`は、1番目と3番目の処理、
|
|
46
46
|
コードで言えば、以下の箇所のみで使用されているように見えます。
|
|
47
47
|
|
|
48
48
|
```JavaScript
|
|
@@ -54,13 +54,13 @@
|
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
値を`0`に初期化した後、カウントアップして`1`にしている。ただそれだけです。
|
|
57
|
-
「この変数の値がLocalStorageに保存される」事がこのコードの要件だと考えられますが、このコードでLocalStorageに保存されているのは、id属性に`dayCount`が指定された要素（`<div id="dayCount"></div>`）内の「`innerHTML`の値」だけです。
|
|
57
|
+
「この変数の値がLocalStorageに保存される」事がこのコードの要件（本来求める動作）だと考えられますが、このコードでLocalStorageに保存されているのは、id属性に`dayCount`が指定された要素（`<div id="dayCount"></div>`）内の「`innerHTML`の値」だけです。
|
|
58
58
|
そしてこの「`innerHTML`の値」の空文字列をLocalStorageに保存してから、再度取り出し、
|
|
59
59
|
再び`innerHTML`へと設定しなおしています。
|
|
60
60
|
が、この間にこの空文字列がカウントの値へ変更されてはいません。
|
|
61
61
|
|
|
62
62
|
これが、カウントアップされない原因です。そもそもカウントの値が保存されていません。
|
|
63
|
-
実際、以下の書いてみたサンプルでもカウントアップどころか、何も表示されない状態になっています。
|
|
63
|
+
実際、以下の実際に書いてみたサンプルでもカウントアップどころか、何も表示されない状態になっています。
|
|
64
64
|
|
|
65
65
|
※空文字列は0文字の文字列データのため、何も表示されない。
|
|
66
66
|
|
|
@@ -72,11 +72,11 @@
|
|
|
72
72
|
|
|
73
73
|
まず、変数`count1`を初期化するときに、`0`をそのまま代入するのではなく、LocalStorageから読みだした値を変数`count1`に代入するようにします。
|
|
74
74
|
ただし、LocalStorageにカウントの値が無い場合には、代わりに`0`を代入するようにします。
|
|
75
|
-
このあたりの処理は、「LocalStorageからカウントの値を読み出し、カウントの数値か
|
|
75
|
+
このあたりの処理は、「LocalStorageからカウントの値を読み出し、カウントの数値か`0`を返す」関数としてひとまとめにしてしまったほうが良いと思います。
|
|
76
76
|
ここでは、これらの処理を`load`関数にまとめることにします。
|
|
77
77
|
|
|
78
|
-
`load`関数でカウントの値を代入し
|
|
78
|
+
`load`関数で取得したカウントの値を変数`count1`に代入し、それから変数`count1`をカウントアップします。
|
|
79
|
-
そ
|
|
79
|
+
そして、カウントアップした値をLocalStorageに保存して、`innerHTML`の値も更新します。
|
|
80
80
|
この時、`innerHTML`の値をLocalStorageに保存するような処理にしては駄目です。
|
|
81
81
|
LocalStorageに保存するのは、変数`count1`の値です。
|
|
82
82
|
そして`innerHTML`は、変数`count1`の値を**書き込むだけ**にしましょう。
|
|
@@ -84,7 +84,8 @@
|
|
|
84
84
|
以上の処理を、**全て「`window.onload`に設定する関数」の中で書きます**。
|
|
85
85
|
「`window.onload`に指定された関数」は非同期処理されるため、外側のコードが最後まで実行された後に呼び出されてしまいます。
|
|
86
86
|
このため、外側と内側とでコードの実行タイミングが異なるようになってしまいます。
|
|
87
|
-
これを混同するとえらく面倒になるうえに、殆どの場合は期待した動作をしてくれなくなるので、
|
|
87
|
+
これを混同するとえらく面倒になるうえに、殆どの場合は期待した動作をしてくれなくなるので、
|
|
88
|
+
全ての処理は「`window.onload`に設定する関数」の中に書いてしまいましょう。
|
|
88
89
|
|
|
89
90
|
ただし、関数定義は除きます。
|
|
90
91
|
関数定義はあくまで関数を定義するだけであって、その場で動作するコードではないため、`window.onload`の外に書いても問題はありません。
|