JavaScriptのlocalstorage

下記のコードは収支を計算するコードです
もとのお金を入力し、ボタンを押せばその日の収入を入力して計算し結果を表示して保存するというコードなのですが保存ができません
どうすればできますか？

JavaScript
1<body>
2  <h1>現在の金額</h1>
3  <input type="text" id="money" value="金額入力">
4  <input type="button" value="結果入力" onclick="calculation();">
5  <div id="show"></div>
6 <script>
7 //ボタンが押されたら計算
8 function calculation() {
9   //軍資金を取得
10   var money = document.getElementById('money').value;
11   //収支を入力させる
12   var result = prompt("収支額入力");
13   //軍資金と収支の計算をする
14   var ans = parseInt(money) + parseInt(result);
15   //showに表示する
16   document.getElementById('show').innerHTML = ans;
17
18   window.onload = function() {
19    var body_money = localStorage.getItem("money");
20    var body_show = localStorage.getItem("show");
21    if (body_money != null) money.value = body_money;
22    if (body_show != null) show.value = body_show;
23    }
24    money.onchange = function() {
25      localStorage.setItem("money",money.value);
26    }
27
28    show.onchange = function() {
29      localStorage.setItem("show",show.value);
30    }
31
32 }
33
34 </script>
35
36</body>

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

回答2件

コードを修正しました。修正したポイントは下記の通りです。

window.onload等イベントハンドラがcalculation()のスコープに入っています。このままだとwindow.onloadが動きません。スコープの外に出しました。
document.getElementById()を繰り返し利用するのでリファクタリングし、外にだしました。
<div>はonchangeハンドラがないです。そのため、`calucuration()`時にlocalStorageに入れるようにしました。

javascript
1<body>
2  <h1>現在の金額</h1>
3  <input type="text" id="money" value="金額入力"/>
4  <input type="button" value="結果入力" onclick="calculation();"/>
5  <div id="show"></div>
6  <script>
7    var money = document.getElementById('money');
8    var show = document.getElementById('show');
9    //ボタンが押されたら計算
10    function calculation() {
11      //収支を入力させる
12      var result = prompt("収支額入力");
13      //軍資金と収支の計算をする
14      var ans = parseInt(money.value) + parseInt(result);
15      //showに表示する
16      show.innerHTML = ans;
17      localStorage.setItem("show",show.innerHTML);
18    }
19
20    window.onload = function() {
21      var body_money = localStorage.getItem("money");
22      var body_show = localStorage.getItem("show");
23      // 何も設定されていないとundefined
24      if (!(body_money == null)) money.value = body_money;
25      if (!(body_show == null)) show.innerHTML = body_show;
26    }
27
28    money.onchange = function() {
29      localStorage.setItem("money",money.value);
30    }
31  </script>
32
33</body>

投稿2015/08/12 05:00

退会済みユーザー

総合スコア0

退会済みユーザー

2015/08/19 15:57

返信遅くなってしまい申し訳ございません以下のように変えてみたのですがやはり保存はできていないですどうすれbあ解決できますか？ <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>  <input type="text" placeholder="元金を入力" id="money"> <br> <input type="button" value="計算" onclick="result();"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> function result(){ //元金を取得 var money = Number(document.getElementById('money').value); //今日の収支を入力 var revenue = Number(prompt('今日の収支')); //合計を1moneyに書き込む var ans = money + revenue; document.getElementById('money').value = ans; } //保存 window.onload = function(){ var body_money = localStorage.getItem('money'); if(body_money != null){ money = body_money; } } //次回以降その合計を出力 money.onchange = function(){ localStorage.setItem('money',money.value); } </script> </body> </html>

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