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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

338閲覧

JavaScriptのローカルストレージの保存、読み取りができません。

Res

総合スコア184

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/04/04 12:59

編集2019/04/04 14:03

ブログのブックマーク機能を作ろうと...

あるサイトで記事のブックマーク機能を作ろうと思ってやったのですが、反応せずうまくできません。どうしたらいいでしょうか。

発生している問題・エラーメッセージ

ボタンが反応しない

該当のソースコード

htmlhtml

<div id="bookmark"> <input type="button" name="" value="この記事をブックマーク" onclick="bookmark()" id="bookmark"> </div> ``` ```Javascript```JavaScript var code = 'bookmark438591' var value = localStorage.getItem(code); if (value === 'on') { document.getElementById('bookmark').value = 'ブックマークを解除'; function bookmark(){ localStorage.removeItem(code); } } else { function bookmark(){ localStorage.setItem(code, 'on'); document.getElementById('bookmark').value = 'ブックマークを解除'; } } ```

試したこと

一回消してまた書き直してみたりしたのですが、やはりダメののでソースコードが原因かと...

補足情報

Chrome最新版でやってます。
ローカルストレージの内容を読み取って表示するページはできています。

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

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

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

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

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

m.ts10806

2019/04/04 13:06

>jqueryは使わないでください。 今回の内容だとこの補足は不要かと思います。jQueryでないと実現できない内容ではありません。
m.ts10806

2019/04/04 13:07

IDのスペルミスは一応指摘しておきます。一瞬「ん?」となるので。 bokkumark → bookmark
m.ts10806

2019/04/04 14:28

回答していますが、よく見たらid="bookmark"が被ってますね。失礼しました。 同一IDは同一ページに1つしか存在できないという原則があるので、回答に提示したコードではそのあたり解消した形にしています。
guest

回答1

0

ベストアンサー

コードが読みづらいので整形かけました。

html

1<div id="bookmark"> 2 <input type="button" name="" value="この記事をブックマーク" onclick="bookmark()" id="bookmark_button"> 3</div>

js

1var code = 'bookmark438591' 2var value = localStorage.getItem(code); 3if (value === 'on') { 4 document.getElementById('bookmark_button').value = 'ブックマークを解除'; 5 6 function bookmark() { 7 localStorage.removeItem(code); 8 } 9} else { 10 function bookmark() { 11 localStorage.setItem(code, 'on'); 12 document.getElementById('bookmark_button').value = 'ブックマークを解除'; 13 } 14}

あとは地道なデバッグです。
処理がどこを通っているかとか、変数の内容とかの確認ですね。

js

1var code = 'bookmark438591' 2var value = localStorage.getItem(code); 3if (value === 'on') { 4 console.log('on'); 5 document.getElementById('bookmark_button').value = 'ブックマークを解除'; 6 7 function bookmark() { 8 console.log('bookmark:remove'); 9 localStorage.removeItem(code); 10 } 11} else { 12 console.log(value); 13 function bookmark() { 14 console.log('bookmark:set'); 15 localStorage.setItem(code, 'on'); 16 document.getElementById('bookmark_button').value = 'ブックマークを解除'; 17 } 18}

イメージ説明
イメージ説明

これで、「ボタンが反応している」かどうかが確認できます(idとか提示コードのままではないので質問者さんのほうでも確認してみてください)

私のほうでは画像の通り、確認できました。
本当に反応していないならエラーがでていたりしているだけですからね。

あとはコードをきちんと仕様に沿って解消する必要があります。
正規化も必要でしょう。

まず、仕様上できるとはいえ、同名関数を分岐かけて定義するのはあまり良くないです。
コードも読みにくいですし、結局同じ関数を呼びに行くわけですから。
関数定義は1つにして中で分岐をかけたほうが良いです。

あとは仕様を整理しましょう(できればプログラムが組みやすいように)

  1. 初期値、「この記事をブックマーク」で表示

※ただし既にブックマークされていたら「ブックマークを解除」とキャプション表示
0. 「この記事をブックマーク」クリック→「ブックマークを解除」にキャプション変更。Storage登録
「ブックマークを解除」クリック→「この記事をブックマーク」にキャプション変更。Storage削除

ざっと作ったのでもう少し整理できるとは思いますが下記のような感じでいかがでしょうか。

js

1const bookmark_caption = 'この記事をブックマーク'; 2const bookmark_remove_caption = 'ブックマークを解除'; 3const code = 'bookmark438591' 4const bookmark_on = 'on'; 5 6let bookmark_button = document.getElementById('bookmark_button'); 7let value = localStorage.getItem(code); 8 9if (value === bookmark_on) { 10 bookmark_button.value = bookmark_remove_caption; 11} else { 12 bookmark_button.value = bookmark_caption; 13} 14 15function bookmark() { 16 if (value === bookmark_on) { 17 bookmark_button.value = bookmark_caption; 18 value = null; 19 localStorage.removeItem(code); 20 } else { 21 bookmark_button.value = bookmark_remove_caption; 22 value = bookmark_on; 23 localStorage.setItem(code,value); 24 } 25}

投稿2019/04/04 14:04

編集2019/04/04 14:10
m.ts10806

総合スコア80765

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

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

Res

2019/04/05 03:15

検討してみます。
Res

2019/04/05 03:19

一応できました。細かく説明ありがとうございます。
m.ts10806

2019/04/05 03:20

解決されたようで何よりです。 デバッグの部分とかは他でも有用ですのでこの際身に付けるようにしてください。質問前に自己解決できることも増えてくるはずです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問