質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

1回答

2121閲覧

JavaScriptで収支表を作りたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

1クリップ

投稿2015/08/20 07:37

下記のコードはパチスロの収支表です
少し問題が起きていてご質問させてください

・結果データ出力の部分が保存されない
・データを一回しか書き込めない
理想はボタンをクリックすれば何回でも書き込め先に書き込んだデータの下に出力されるようにしたい

どこを変えればうまくいくのでしょうか?

JavaScript

1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6</head> 7<body> 8 <h1>パチスロ収支表</h1><br> 9 <input type="button" value="収支を入力" onclick="money_form();"><br> 10 <!--ここに現在の金額を表示--> 11 <div id="result"></div> 12 <h2>収支履歴</h2><br> 13 <!--過去に打ち込んだ収支を表示--> 14 <div id="money_log"></div> 15 16<script> 17 function money_form(){ 18 //日付の取得 19 var now = new Date(); 20 var yaer = now.getFullYear(); 21 var month = now.getMonth() + 1; 22 var date = now.getDate(); 23 //結果データ 24 var today = yaer + "/" + month + "/" + date; 25 var form_today = prompt("日付を入力", today); 26 var form_name = prompt("台名を入力"); 27 var form_money = prompt("収支を入力"); 28 var today_result = form_today + "/" + form_name + "/" + form_money + "円"; 29 //結果データ出力 30 var txt_result = document.getElementById('money_log').innerHTML = today_result; 31 } 32 //logの保存とロード 33 window.onload = function() { 34 var body_result = localStorage.getItem('txt_result'); 35 } 36 money_log.onchange = function(){ 37 localStorage.setItem('today_result', today_result.value); 38 } 39 40 //console.log(body_result); 41 42</script> 43</body> 44 45</html>

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

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

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

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

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

guest

回答1

0

こちらでどうでしょう。

javascript

1 function money_form(){ 2 //日付の取得 3 var now = new Date(); 4 var yaer = now.getFullYear(); 5 var month = now.getMonth() + 1; 6 var date = now.getDate(); 7 //結果データ 8 var today = yaer + "/" + month + "/" + date; 9 var form_today = prompt("日付を入力", today); 10 var form_name = prompt("台名を入力"); 11 var form_money = prompt("収支を入力"); 12 var today_result = form_today + "/" + form_name + "/" + form_money + "円"; 13 //結果データ出力 14 var result_data = document.getElementById('money_log').innerHTML; 15 if(result_data != ""){ 16 result_data += "<br>\n"; //空じゃない場合に改行 17 } 18 document.getElementById('money_log').innerHTML = result_data + today_result; 19 save(); 20 } 21 //logの保存とロード 22 window.onload = function() { 23 var body_result = localStorage.getItem('txt_result'); 24 document.getElementById('money_log').innerHTML = body_result; 25 } 26 function save(){ 27 localStorage.setItem('txt_result', document.getElementById('money_log').innerHTML); 28 } 29

元のコードには、主に次のような問題があります。
<div>にonchangeは使用できません。従って、保存はされません。そもそもmoney_logは未定義の状態です。
・保存時と読み込み時でストレージのキーが違う。そのため、保存・読み込みができない。
・書き込むときに元のHTMLに上書きしてしまっている。

ですので、示したコードを試してみてください。

投稿2015/08/20 07:58

編集2015/08/20 08:00
orange0190

総合スコア1698

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

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

退会済みユーザー

退会済みユーザー

2015/08/23 00:15

ありがとうございます!! また質問で申し訳ないのですがたとえば10個書き込んだとして上から2目を削除したいと思った時に削除する方法ってありますか?
退会済みユーザー

退会済みユーザー

2015/08/23 03:46

追記です window.onload = function() { var body_result = localStorage.getItem('txt_result'); document.getElementById('money_log').innerHTML = body_result; } のtxt_resultってどこで変数としてtxt_resultが定義されているのでしょうか?
orange0190

2015/08/24 00:17

>window.onload = function() { >var body_result = localStorage.getItem('txt_result'); >document.getElementById('money_log').innerHTML = body_result; >} >のtxt_resultってどこで変数としてtxt_resultが定義されているのでしょうか? txt_resultという変数は定義されていません。save()でストレージに「txt_result」という名前で保存し、 localStorage.getItem('txt_result')で「txt_result」という名前で保存したものを取り出しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問