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

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

ただいまの
回答率

90.61%

  • JavaScript

    15923questions

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

JavaScriptの変数の更新

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 887

Furisuke

score 93

下記のコードはプロンプトで入力された数字をinnerHTMLに表示し保存するというコードです。
そこまではうまくいくのですがこれを
次回入力された数字が前回より大きな数字だった場合のみ保存
という風にするにはどうすればいいのでしょうか?
<body>
  <input type="button" value="start" onclick="start()">
  <div id="result"></div>
<script>
function start() {
  var num = prompt("数字を入力");
  document.getElementById('result').innerHTML = num;
  save();
}
window.onload = function(){
  var body_num = localStorage.getItem('num');
  document.getElementById('result').innerHTML = body_num;
}

function save(){
  localStorage.setItem('num', document.getElementById('result').innerHTML);
}


</script>
</body>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

function start() {
  var num = prompt("数字を入力");
  var nowValue = parseInt(document.getElementById("result").innerHTML, 10);
  if(!isNaN(nowValue) && nowValue < parseInt(num, 10)){
    document.getElementById('result').innerHTML = num;
    save();
  }
}
上記のようにしてみてはいかがでしょうか?

現在表示されている値と入力された値を数値にして比較しているだけです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/27 10:22

    回答ありがとうございます
    いくつか解説お願いしたいです・・・。
    var nowValue = parseInt(document.getElementById("result").innerHTML, 10);
    の10とはなんなのでしょうか?
    if(!isNaN(nowValue) && nowValue < parseInt(num, 10))
    の!isNaN(nowValue)とは?NaNじゃなかったらということでしょうか?

    キャンセル

  • 2015/08/27 10:48

    >var nowValue = parseInt(document.getElementById("result").innerHTML, 10);
    >の10とはなんなのでしょうか?
    こちらは十進数の数値に変換するという意味です。「10」で十進数を指定しています。

    >if(!isNaN(nowValue) && nowValue < parseInt(num, 10))
    >の!isNaN(nowValue)とは?NaNじゃなかったらということでしょうか?
    そのとおりです。parseIntは数値を含まないような文字列(例えば、「abc」といった文字列)を変換するとNaN(Not a Number)を返しますので、そのような場合を拒否しています。

    これを書いて思ったのですが、最初に示したコードはまずいですね。次のようにしてください。

    function start() {
    var num = prompt("数字を入力");
    num = parseInt(num, 10);
    var nowValue = parseInt(document.getElementById("result").innerHTML, 10);
    if(!isNaN(nowValue) && !isNaN(nowValue) && nowValue < num){
    document.getElementById('result').innerHTML = num;
    save();
    }
    }

    キャンセル

  • 2015/08/27 12:20

    コメント中のif文の中に !isNaN(nowValue) && !isNaN(nowValue) && 〜と二回繰り返されていますが、 !isNaN(num) && !isNaN(nowValue) && 〜 の書き間違いでしょうか?

    また、初回の何も保存されていない時、nowValueは`parseInt('', 10);`になるので常にNaNになってしまうように思います。で、NaN > num で数値比較しても常にfalseになってしまったように思いますので、上手く動作しないような気がしますが、いかがでしょうか?

    キャンセル

  • 2015/08/30 11:28

    To: ShunsukeIzuiさん
    補足しますと、isNaN() は NaN 値の判定ではなく、Number 型へ変換した時に NaN になれば true を返します。
    つまり、isNaN('string') === true です。
    parseInt() で Number 型へ変換済の為、この場合は NaN の判定として機能しますが、isNaN() の機能として記憶してしまうと混乱の元なので補足しました。
    NaN の判定には Number.isNaN() を使います。

    キャンセル

  • 2015/08/31 09:31

    KiKiKi_KiKiさん
    >コメント中のif文の中に !isNaN(nowValue) && !isNaN(nowValue) && 〜と二回繰り返されていますが、 !isNaN(num) && !isNaN(nowValue) && 〜 の書き間違いでしょうか?
    その通り、書き間違いです。

    >また、初回の何も保存されていない時、nowValueは`parseInt('', 10);`になるので常にNaNになってしまうように思います。で、NaN > num で数値比較しても常にfalseになってしまったように思いますので、上手く動作しないような気がしますが、いかがでしょうか?
    確かに最初がうまく動作しないですね。ご指摘ありがとうございます。

    think49さん
    補足説明ありがとうございます。

    キャンセル

0

ShunsukeIzuiさまの書かれている通り、前の値と入力された値を比較するif文をつければOKだとおもいます。

個人的には値を取得する関数に切り分けてると見通しが良くなるかなと思いました。
後は、マイナスの数と0の時の処理の取りこぼしに気をつければ良さそうな気がします。
/* 値を取得するだけ */
function getNum() {
  return localStorage.getItem('num');
}
/* 渡された値を保存するだけ */
function save(num){
  /* 必要であれば ここに num が数値ではなければ弾くバリデーションを入れる。*/
  localStorage.setItem('num', num);
}

function start() {
  var num = getNum();
  // 空文字列をNaNにするためにparseInt()を使用。Number()だと0になってしまう。
  var newNum = parseInt(prompt("数字を入力"), 10);
  /*
   * 0 の時も比較できるようにnewNumの有無を (newNum || newNum === 0) で判定 
   * num-0 して数値化して比較する。
   * なにも保存されてない時マイナスの数を入力されると
   * newNum > num-0 だけだと 0 との比較になって保存されないので、
   * newNumがあってnumがnullの場合は保存するようにする
   */
  if((newNum || newNum === 0) && (newNum > num-0 || !num)) {
    document.getElementById('result').innerHTML = newNum;
    save(newNum);
  }
}

window.onload = function(){
  var body_num = getNum();
  document.getElementById('result').innerHTML = body_num;
};

parseInt()Number()も入力される値によって変換のクセがあるので完璧に数値の入力しか受け付けないとかにするのであれば、入力値を直ぐに変換するのではなく間にバリデーションを入れてその後で変換するなどとした方が良いと思います。

型変換のいろいろ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/30 11:24

    > // 空文字列をNaNにするためにparseInt()を使用。Number()だと0になってしまう。
    私見ですが、parseInt() は parseInt('1foo') === 1; や parseInt('3.14') === 3 が成立する仕様がもやもやします。
    Number('') === 0 を敬遠するのであれば、下記対策が考えられます。
    - /^-?\d+(?:\.\d+)?$/.test(numberString) で判定してから Number()
    - prompt() を止めて input[pattern] で validation してから Number()
    - numberString === Number(numberString).toString() で判定(numberString === 'NaN' の例外処理が必要)

    キャンセル

  • 2015/08/31 17:54

    think49さん

    はい、parseInt()の単位の様なものがある場合の挙動も存じております。
    Number()、parseInt()いずれにせよ、癖があるので、

    > parseInt()もNumber()も入力される値によって変換のクセがあるので完璧に数値の入力しか受け付けないとかにするのであれば、入力値を直ぐに変換するのではなく間にバリデーションを入れてその後で変換するなどとした方が良いと思います。

    と書いていましたが、parseInt()の方は説明不足でしたので補足説明ありがとうございます。

    キャンセル

  • 2015/09/01 12:48 編集

    いずれも癖があるのは分かるのですが、どちらかといえば parseInt() の方が独自処理が多いのではないかなという気がしたもので、Number() の独自処理だけ説明されているのがやや不公平に感じてしまいました…。
    http://www.ecma-international.org/ecma-262/6.0/#sec-number-constructor
    http://www.ecma-international.org/ecma-262/6.0/#sec-parseint-string-radix
    http://www.ecma-international.org/ecma-262/6.0/#sec-parsefloat-string
    Number() が内部的に使用している ToNumber は ES のネイティブメソッドで Number 型に型変換する時にも使われるという事もあり、Number(" ") === 0 はデフォルト値として許容できる考えを持っていますが、ToNumber で独自値を入れる処理がそれぐらいだと思うので、if (/^\s+$/.test(numberString)) { return NaN } を入れるだけで済むかもしれません。
    http://www.ecma-international.org/ecma-262/6.0/#sec-tonumber-applied-to-the-string-type
    でも、validate 処理をいろいろ考えるのは面倒なので Number.prototype.toString で照合すれば、ES に処理を丸投げ出来て実装的に楽だなーと思います。
    https://teratail.com/questions/15206#r23914

    キャンセル

0

既に質問者さんは見ておられない様子ですが、他の回答者さんにコメントした手前何も回答しないのは失礼かと思うので回答を残します。
JSFiddle に下記HTMLをUPしました。

<script>
'use strict';
function getNumber () {
  var number = localStorage.getItem('num');
  return number ? Number(number) : NaN;
}

function handleStart () {
  var numberString = prompt('数字を入力'),
      number = Number(numberString),
      oldNumber = getNumber();

  if (numberString === number.toString() && !isNaN(number) && (number > oldNumber || isNaN(oldNumber))) {
    localStorage.setItem('num', numberString);
    document.getElementById('result').firstChild.data = number;
  }
}

function handleInitialize () {
  localStorage.removeItem('num');
  document.getElementById('result').firstChild.data = '出力値';
}

function handleDOMContentLoaded () {
  var number = getNumber();

  if (!isNaN(number)) {
    document.getElementById('result').firstChild.data = number;
  }
}

document.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
</script>
</head>
<body>

<input type="button" value="start" onclick="handleStart()">
<input type="button" value="initialize" onclick="handleInitialize()">
<div id="result">出力値</div>

 - localStrage は String 型でデータが保存される為、数値の大小比較するためには Number 型へ変換する必要があります
 - 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/02 08:40

    もう一度回答していただいたものを読んで書いてみます!
    ありがとうございます

    キャンセル

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

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    JavaScriptでギャラリーを作りたい

    現在JSでギャラリー的なものを作ろうとしています 仕様としては 画面上段に画像(原寸より小さいもの)を表示し、クリックされると下にその画像の原寸大が表示されるというものです ですが

  • 受付中

    innerHTMLの追加と削除

    こんにちは 現在JSでToDoメモのようなものを作ろうと思っているのですが 問題点が2つ出てきました。 1、innerHTMLにtextに書き込まれた内容を書き込めるが追加ができな

  • 受付中

    JSのテキスト保存について

    下記のコードはテキストボックスに書かれた文字をinnerHTMLで書き出しそれを更新しても消えない、保存するというプログラムです。 ですが肝心の保存ができません なぜでしょうか?

  • 受付中

    JavaScriptのlocalstorage

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

  • 受付中

    JavaScriptで収支表を作りたい

    下記のコードはパチスロの収支表です 少し問題が起きていてご質問させてください ・結果データ出力の部分が保存されない ・データを一回しか書き込めない 理想はボタンをクリックすれば何

  • 受付中

    JSのToDoメモ制作について

    以下のコードはJavaScriptのToDoメモです。 書き込んだ内容を追加、保存はうまくいったのですが削除がうまくいきません。削除ボタンを押すとすべて消えてしまいます。 どうすれ

  • 受付中

    JSで任意のinnerHTMLを削除したい

    先日同じような質問をさせていただいたのですが初心者の私にはとても難しく理解できなかったのでもう一度質問させていただきます 下記のコードはテキストボックスで受け取った内容をinner

  • 解決済

    JavaScriptでの計算

    定価360円の商品を購入するときその個数が1~9なら定価販売 10~19の時なら全体から5%割引 20~なら10%割引にしたいのですがすべて定価になってしまいます どうすればいいの

同じタグがついた質問を見る

  • JavaScript

    15923questions

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