s8_chu score 14261
2017/01/04 11:23 投稿
| [id属性はユニーク](http://affiliate.ks-product.com/html_id_class_howto/)でなければなりません。 |
| 今回の場合は、```<input id=\"k\" type=\"text\" value=" + k + ">```を見るとわかるように、**各フォームに1つずつkというid属性が設定されている**ため、上のようにid属性を設定する方法と,```var k = document.getElementById("k").value;```は間違いだということがわかると思います。 |
| 以上のことから、コードはこんな感じになると思います。 |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset=utf-8> |
| <title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title> |
| </head> |
| <body> |
| <script> |
| var storage = localStorage; |
| var result = ""; |
| var items = { |
| data1: "data2", |
| data3: "data4" |
| }; |
| function addItem() {//setItem用関数 |
| Object.keys(items).forEach(function (key) { |
| storage.setItem(key, items[key]); |
| }); |
| } |
| function dataDelete(key) { |
| alert(key); |
| storage.removeItem(key); |
| } |
| window.onload = function () { |
| for (var i = 0; i < storage.length; i++) { |
| var k = storage.key(i); |
| result += "<form name='js'>" + |
| "<table border='1' cellspacing='0' cellpadding='0'>" + |
| "<tr>" + |
| "<td width='100'>" + |
| k + |
| "</td>" + |
| "<td width='200'>" + |
| storage.getItem(k) + |
| "</td>" + |
| "<td width='100'>" + |
| "<input id='k" + i + "' type='text' value='" + k + "'>" + |
| "<input type='submit' value='削除' onclick='dataDelete(\"" + k + "\")'>" + |
| "</td>" + |
| "</tr>" + |
| "</table>" + |
| "</form>"; |
| } |
| document.getElementById("show_result").innerHTML = result; |
| }; |
| </script> |
| <div id="show_result"></div> |
| </body> |
| </html> |
| ``` |
| また、今回の質問内容とはあまり関係ありませんが、HTMLの書き方が少しおかしいと感じる部分がありましたので、下に書いておきます。 |
| - tableタグの中にdivタグが存在する。 |
| - pタグの中にtableタグが存在する。 |
| - pタグの中にtableタグが存在する。 |
| 追記 |
| --- |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset=utf-8> |
| <title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title> |
| </head> |
| <body> |
| <script> |
| var storage = localStorage; |
| var result = ""; |
| var items = { |
| data1: "data2", |
| data3: "data4" |
| }; |
| function addItem() {//setItem用関数 |
| Object.keys(items).forEach(function (key) { |
| storage.setItem(key, items[key]); |
| }); |
| } |
| function dataDelete(key) { |
| alert(key); |
| storage.removeItem(key); |
| } |
| function dataChange(key, changeKey) { |
| dataChangeText = document.getElementById(changeKey).value; |
| if (window.confirm(localStorage[key] + "を" + dataChangeText + "に変更します。")) { |
| localStorage[key] = dataChangeText; |
| } |
| } |
| window.onload = function () { |
| for (var i = 0; i < storage.length; i++) { |
| var k = storage.key(i); |
| result += "<form name='js'>" + |
| "<table border='1' cellspacing='0' cellpadding='0'>" + |
| "<tr>" + |
| "<td width='100'>" + |
| k + |
| "</td>" + |
| "<td width='200'>" + |
| storage.getItem(k) + |
| "</td>" + |
| "<td width='100'>" + |
| "<input id='k" + i + "' type='text' value='" + k + "'>" + |
| "<input type='submit' value='削除' onclick='dataDelete(\"" + k + "\")'>" + |
| "<input id='change_k" + i + "' type='text' value='" + localStorage[k] + "'>" + |
| "<input type='submit' value='変更' onclick='dataChange(\"" + k + "\", \"change_k" + i + "\")'>" + |
| "</td>" + |
| "</tr>" + |
| "</table>" + |
| "</form>"; |
| } |
| document.getElementById("show_result").innerHTML = result; |
| }; |
| </script> |
| <div id="show_result"></div> |
| </body> |
| </html> |
| ``` |
