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

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

ただいまの
回答率

88.59%

ラジオボタンの値を登録できているようでできていない ローカルストレージ

解決済

回答 3

投稿 編集

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

terame120

score 14

初心者です
ttps://cr-vue.mio3io.com/tutorials/todo.html

こちらを参考に、自分用にアプリを作ろうとしています。

登録していないが完了したものも登録したく、作業中と完了を追加する時点で選択したいと思っています。
そこで、2択のラジオボタンで、valueを0と1で区別しました。
それをjqueryで取得し、

var val= $('input[name=stts]:checked').val()


そして、step7のところに、

this.todos.push({
        id: todoStorage.uid++,
        comment: comment.value,
        state: val
      })


という形でstateの値として保存 しているつもりです。

結果として、表示切替(step12)の「すべて」には選択したとおりにきちんと追加されるのですが、
「作業中」「完了」には表示されません。

しかし、リストにある状態変更ボタン(step13)で変更するとちゃんと表示されるようになります。

なぜすべてには状態もしっかり表示されるのに、状態で表示切替すると表示されないのでしょうか。
きちんとローカルストレージにstateの値として登録されておらず、切り替えることでちゃんと登録される手順を踏むのかと思いましたが、すべてではしっかり表示されるのです。

変数を使用せず、

this.todos.push({
        id: todoStorage.uid++,
        comment: comment.value,
        state: 1
      })


と、常に1で登録されるようにしてみるとちゃんと完了に追加されていきます。(0=作業中 1=完了)
確認しましたが、変数はしっかり選択したvalueの値を読み取っていました。なにがいけないのでしょうか。

この説明で伝わるでしょうか。アドバイスいただけますと助かります。

すべて作業中(メモ)完了(記入済)

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

全体像が不明瞭なので、参考サイトからの推測ですが、

var val= $('input[name=stts]:checked').val()

で取得したvalが文字列の'1' '0'なので、

{ value: -1, label: 'すべて' },
{ value: 0,  label: '作業中' },
{ value: 1,  label: '完了' }

valueと比較したときに型がかみ合わず、表示されないのではないでしょうか。
「すべて」のときに表示されるのは比較がなく文字通り全部表示するからだと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/29 00:55

    不明瞭なままで突っ込んだお話を聞いてしまい申し訳ありません。パソコンがネットに繋がらなくなり、全体をのせられずにいたのですが、先ほど解決いたしました。
    数値と文字列の違いで噛み合わなくなる、ということを念頭に考えるととても納得で、調べて数値に変換をしてみたところ、うまくいきました。本当にありがとうございます。

    キャンセル

  • 2018/11/29 01:31

    解決したようでよかったです。
    ちなみに「==」で比較することで文字列と数の比較時に暗黙の型変換がおきるので、'1' == 1 をtrue扱いにもできます。
    ただ、普段から型を意識した方が思考(処理)も整理されるので、「===」の比較をおすすめします。

    キャンセル

  • 2018/11/29 21:47

    そういう方法もあるのですね。はい、これから型を意識していきたいと思います。教えていただき、ありがとうございました。

    キャンセル

+1

ちょっと立ち止まって

JavaScriptの使用される型宣言にはなにがありますか?
その時数値を扱うならどんな方で宣言すればいいですか?
まずはそこをしっかり認識されるのが今後のためにも近道だと思いますよ。

JavaScriptだけに気持ちが向いていますが

現在がJavascript で成功していないなら完全に文字にvalue値を変更されてみられるのも一つの方法ではないでしょうか?
だって文字列の0と数値の0を比べたらいったいどういう結果がえられますか?
null にはなりませんか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/29 01:05

    ご指摘の通りです。これからコードをさわっていく上で、基本を意識するようにしたいです。javascriptはドットインストールを一通り見ながら同じように打った程度の知識でしたので、型宣言とは…?と調べ始めるくらい基本が思い出せないのはこれからのために良くないですね。

    考え方の転換についても、文字列でやることも考えたのですが、value値での振り分けのコードに数値の大小を用いているようでしたのでできたら数値が良いなと思っておりましたが、改めて考えてみると、自分でわかる範囲でのコードの文字列使用への書き換えかたはあったなあと感じました。
    この先に有用なご回答をありがとうございます。

    キャンセル

  • 2018/11/30 14:25

    私もJavaScriptはそんなに詳しくありませんが、「数字」と「数値」をはっきりさせておいた方が今後のスクリプティングには役立つと思います。数値宣言や数字(文字)宣言など、今まで意識する必要のなかったことが急に求められるので、戸惑いますよね。

    キャンセル

0

state=Number(val)
とすることで解決しました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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