Q&A
退会済みユーザー
総合スコア0
投稿2015/08/27 00:35
下記のコードはプロンプトで入力された数字をinnerHTMLに表示し保存するというコードです。
そこまではうまくいくのですがこれを
次回入力された数字が前回より大きな数字だった場合のみ保存
という風にするにはどうすればいいのでしょうか？
JavaScript
1<body> 2 <input type="button" value="start" onclick="start()"> 3 <div id="result"></div> 4<script> 5function start() { 6 var num = prompt("数字を入力"); 7 document.getElementById('result').innerHTML = num; 8 save(); 9} 10window.onload = function(){ 11 var body_num = localStorage.getItem('num'); 12 document.getElementById('result').innerHTML = body_num; 13} 14 15function save(){ 16 localStorage.setItem('num', document.getElementById('result').innerHTML); 17} 18 19 20</script> 21</body>
回答3件
0
既に質問者さんは見ておられない様子ですが、他の回答者さんにコメントした手前何も回答しないのは失礼かと思うので回答を残します。
JSFiddle に下記HTMLをUPしました。
HTML
1<script> 2'use strict'; 3function getNumber () { 4 var number = localStorage.getItem('num'); 5 return number ? Number(number) : NaN; 6} 7 8function handleStart () { 9 var numberString = prompt('数字を入力'), 10 number = Number(numberString), 11 oldNumber = getNumber(); 12 13 if (numberString === number.toString() && !isNaN(number) && (number > oldNumber || isNaN(oldNumber))) { 14 localStorage.setItem('num', numberString); 15 document.getElementById('result').firstChild.data = number; 16 } 17} 18 19function handleInitialize () { 20 localStorage.removeItem('num'); 21 document.getElementById('result').firstChild.data = '出力値'; 22} 23 24function handleDOMContentLoaded () { 25 var number = getNumber(); 26 27 if (!isNaN(number)) { 28 document.getElementById('result').firstChild.data = number; 29 } 30} 31 32document.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false); 33</script> 34</head> 35<body> 36 37<input type="button" value="start" onclick="handleStart()"> 38<input type="button" value="initialize" onclick="handleInitialize()"> 39<div id="result">出力値</div>
localStrage は String 型でデータが保存される為、数値の大小比較するためには Number 型へ変換する必要がありますNumber(), parseInt(), parseFloat() の三種類が存在しますが、ここでは最も簡易的処理となる Number() を採用しましたNumber() (内部的には ToNumber) で Number 型へ型変換した後に Number.prototype.toString で String 型に戻し、元々の文字列と照合する事で正規の数値文字列かを確認していますlocalStrage にゴミが残ると良くないので削除処理も入れておきましたlocasStrage は IE8+で使えるメソッドです(IE7 に対応するなら Cookie を使用して下さい)addEventListener は IE9+ で使えるメソッドです(諸般の事情で addEventListener を使用しましたが、IE8 に対応するなら attachEvent or body[onload] を使用して下さい)投稿2015/09/01 03:43
総合スコア18164
0
ShunsukeIzuiさまの書かれている通り、前の値と入力された値を比較するif文をつければOKだとおもいます。
個人的には値を取得する関数に切り分けてると見通しが良くなるかなと思いました。
後は、マイナスの数と0の時の処理の取りこぼしに気をつければ良さそうな気がします。
javascript
1/* 値を取得するだけ */ 2function getNum() { 3 return localStorage.getItem('num'); 4} 5/* 渡された値を保存するだけ */ 6function save(num){ 7 /* 必要であれば ここに num が数値ではなければ弾くバリデーションを入れる。*/ 8 localStorage.setItem('num', num); 9} 10 11function start() { 12 var num = getNum(); 13 // 空文字列をNaNにするためにparseInt()を使用。Number()だと0になってしまう。 14 var newNum = parseInt(prompt("数字を入力"), 10); 15 /* 16 * 0 の時も比較できるようにnewNumの有無を (newNum || newNum === 0) で判定 17 * num-0 して数値化して比較する。 18 * なにも保存されてない時マイナスの数を入力されると 19 * newNum > num-0 だけだと 0 との比較になって保存されないので、 20 * newNumがあってnumがnullの場合は保存するようにする 21 */ 22 if((newNum || newNum === 0) && (newNum > num-0 || !num)) { 23 document.getElementById('result').innerHTML = newNum; 24 save(newNum); 25 } 26} 27 28window.onload = function(){ 29 var body_num = getNum(); 30 document.getElementById('result').innerHTML = body_num; 31};
parseInt()もNumber()も入力される値によって変換のクセがあるので完璧に数値の入力しか受け付けないとかにするのであれば、入力値を直ぐに変換するのではなく間にバリデーションを入れてその後で変換するなどとした方が良いと思います。
投稿2015/08/27 03:08
総合スコア596
0
javascript
1function start() { 2 var num = prompt("数字を入力"); 3 var nowValue = parseInt(document.getElementById("result").innerHTML, 10); 4 if(!isNaN(nowValue) && nowValue < parseInt(num, 10)){ 5 document.getElementById('result').innerHTML = num; 6 save(); 7 } 8} 9
上記のようにしてみてはいかがでしょうか?
現在表示されている値と入力された値を数値にして比較しているだけです。
投稿2015/08/27 00:53
総合スコア1698
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/09/01 23:40