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

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

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

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

Q&A

解決済

1回答

3151閲覧

localstrageに個別削除ボタンを付けたい

tajix_japan

総合スコア132

JavaScript

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

0グッド

0クリップ

投稿2017/02/25 02:04

localstrageに収納されているデータが複数あります。

この複数のデータのそれぞれを表示させるときに、個別削除ボタンを付けたいと考えています。

下記のように<BR><input type='button' value='削除' onClick='removeItem(k)'>でremoveItem(k)を呼び出して個別削除するように作りました。

【結果】
alert("このデータを消去しました。"); は出てくるのですが、実際には消去されていません。
どこが間違っているのかご教示戴きたくお願いいたします。

javascript

1 2 3 4<script> 5var storage = localStorage; 6 7//データを保存する 8function set() { 9 var k = document.getElementById("k").value; 10 var v = document.getElementById("v").value; 11 storage.setItem(k, v); 12 show_result(); 13} 14 15//データを個別クリアする 16function removeItem(k) { 17 storage.removeItem(k); 18 alert("このデータを消去しました。"); 19 show_result(); 20} 21 22//保存されているデータをリスト表示する 23function show_result() { 24 var result = ""; 25 //保存されているデータの数だけループ 26 for(var i=0; i<storage.length; i++){ 27 //i番目のキーを取得 28 var k = storage.key(i); 29 30 result +="<BR><input type='button' value='削除' onClick='removeItem(k)'><BR><a href=" + storage.getItem(k) + "><table class='table table-striped table-hover '><tr class='active'><td>" + k + "</td></tr></table></a>" ; 31 32 } 33 //上のループで作成されたテキストを表示する 34 document.getElementById("show_result").innerHTML = result; 35 36} 37</script> 38 39<input type="hidden" id="get_hyoji" value="表示" onClick="set()"> 40</p> 41<p> 42<div id="show_result"></div> 43</p> 44 45 46<script> 47document.getElementById('get_hyoji').click(); 48</script> 49 50

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

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

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

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

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

guest

回答1

0

ベストアンサー

onclickのところですが、"onClick='removeItem(" + k + ")'のようにkを文字列の外に出して、変数として展開されるようにする必要があるかと思います。

さらに、その展開された文字列が変数名として扱われないよう、引用符で括ります。 → "onClick='removeItem(\"" + k + "\")'

投稿2017/02/25 02:22

編集2017/02/25 02:25
sii_side

総合スコア849

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

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

tajix_japan

2017/02/25 05:18

有難うございます。 result +="<BR><input type='button' id='hyoji' value='削除' onClick='removeItem(\"" + k + "\")'><BR><a href=" + storage.getItem(k) + "><table class='table table-striped table-hover '><tr class='active'><td>" + k + "</td></tr></table></a>" ; としてみました。 今度はalertすら出てこなくなりました。 上記に変更した後 //データを個別クリアする function removeItem(k) { // window.localStorage.removeItem(key); storage.removeItem(k); alert("このデータを消去しました。"); show_result(); } を //データを個別クリアする function removeItem() { // window.localStorage.removeItem(key); storage.removeItem(); alert("このデータを消去しました。"); show_result(); } と変更してみたのですが、やはりだめなようです。 他になにか御座いませんでしょうか? よろしくお願いいたします。
tajix_japan

2017/02/25 08:11

大変失礼しました。 別の要因で動かなかったようです。 このjavascriptそのものに問題ありませんでした。有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問