Q&A
ありがとうございます。
参考にさせていただきます。
###実装したいこと
javaScriptについて質問です。
初期画面で「何円貯金しました。」の数字の部分を「0円貯金しました。」と数字を表示したいのです。現在は、アプリを開いて一番初めにNaNと表示され、アプリを再起動すると0円と表示されます。アプリを開いて初めから0円という風に表示したいです。
また、一定の額貯金するごとに「おめでとうございます。」などの画面を表示して、一度タップすると元の画面に戻るようにしたいです。
アドバイスをいただきたいです。
よろしくお願いいたします。
コー<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>クリックアプリ</title> </head> <body> <p>家事をして<br><span style="background: linear-gradient(transparent 50%, tomato 70%);"id="Output">0</span>円<br>貯金しました</p> <img class="js-image-insertarea" src=""> <input class="js-trigger-button" type="button" value="貯金する"> <script type="text/javascript"> function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } ( function() { var Count = 0; if(isNaN(localStorage.getItem('kingaku'))){ Count = 0; } else{ Count = parseInt(localStorage.getItem('kingaku'),10); //localStorageから読んだ値を文字列→整数変換 } var outputElement = document.getElementById("Output") outputElement.textContent = Count; //起動時のCount値の表示 var imageElement = document.querySelector('.js-image-insertarea') function CountUp() { if(getRandomInt(100) < 11) { Count += 200; } Count += 100; localStorage.setItem('kingaku',Count); //現在のカウント値をlocalStorageに保存する（文字列で保存される） outputElement.textContent = Count; } function getImage() { var image = new Array("./image1.png","./image2.png","./image3.png"); var randomNum = (Math.floor(Math.random() * 3) ); imageElement.src = image[ randomNum ] } function onClickTriggerButton() { CountUp(); getImage(); } document.querySelector('.js-trigger-button').addEventListener('click', onClickTriggerButton) })() </script> </body> </html>ド
回答2件
0
ベストアンサー
localStorage.getItem()
localStorage.getItem() はkeyが存在すれば String 値を返し、key が存在しなければ null を返す仕様です。
https://triple-underscore.github.io/WebStorage-ja.html#the-storage-interface
isNaN
+0, -0 を区別する厳密な変換をするなら、次のように書けます。
JavaScript
1var count = localStorage.getItem('kingaku'); 2 3count = isNaN(count) ? 0 : Number(count);
Re: gakuseikun さん
投稿2019/12/18 10:11
総合スコア18189
0
こういう感じ
javascript
1var x="a"/1; 2console.log(x+"円貯金した"); //NaN円貯金した 3var y="a"/1||0; 4console.log(y+"円貯金した"); //0円貯金した 5
投稿2019/12/18 09:04
総合スコア116694
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/18 14:06