Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除ができません

Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除をしたいのですが
思うように削除できません

javascript
1コード
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5<meta charset=utf-8>
6<title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title>
7</head>
8<body>
9<script>
10var storage = localStorage;
11
12window.onload = function()
13 {
14  var result = "";
15  
16  for(var i=0; i<storage.length; i++){
17
18    var k = storage.key(i);
19
20 result +="<form name=\"js\"><p><table border=\"1\"  cellpadding=\"0\" cellspacing=\"0\"><tr><td width=\"100\">" + k + "</td><td width=\"200\">" + storage.getItem(k) + "</td><td width=\"100\"><input id=\"k\" type=\"text\" value=" +  k + "><input type=\"submit\" value=\"削除\" onClick=\"dataDelete('key')\"></td></tr></table></p></form>";
21
22  }
23  
24  document.getElementById("show_result").innerHTML = result;
25
26};
27</script>
28<p>
29<table>
30<div id="show_result"></div>
31</table>
32 <script>
33function dataDelete(key) {
34
35var k = document.getElementById("k").value;
36
37	localStorage.removeItem(k);
38}
39</script>
40</p>
41</body>
42</html>
43
44ーーーーーーーーーーー
45大きくミスしていると思うのですが思ったように削除できません
46どこが間違っているかもわかりません
47大変もうしわけないのですがよろしくお願いします

kei344

2017/01/03 14:43

質問文の</html>の後に改行と「```」が足りていません。

行動規範の内容に同意します

回答1件

ベストアンサー

id属性はユニークでなければなりません。
今回の場合は、<input id=\"k\" type=\"text\" value=" + k + ">を見るとわかるように、各フォームに1つずつkというid属性が設定されているため、上のようにid属性を設定する方法と,var k = document.getElementById("k").value;は間違いだということがわかると思います。
以上のことから、コードはこんな感じになると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset=utf-8>
5    <title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title>
6</head>
7<body>
8<script>
9    var storage = localStorage;
10    var result = "";
11    var items = {
12        data1: "data2",
13        data3: "data4"
14    };
15
16    function addItem() {//setItem用関数
17        Object.keys(items).forEach(function (key) {
18            storage.setItem(key, items[key]);
19        });
20    }
21
22    function dataDelete(key) {
23        alert(key);
24        storage.removeItem(key);
25    }
26
27    window.onload = function () {
28        for (var i = 0; i < storage.length; i++) {
29            var k = storage.key(i);
30
31            result += "<form name='js'>" +
32                "<table border='1' cellspacing='0' cellpadding='0'>" +
33                "<tr>" +
34                "<td width='100'>" +
35                k +
36                "</td>" +
37                "<td width='200'>" +
38                storage.getItem(k) +
39                "</td>" +
40                "<td width='100'>" +
41                "<input id='k" + i + "' type='text' value='" + k + "'>" +
42                "<input type='submit' value='削除' onclick='dataDelete(\"" + k + "\")'>" +
43                "</td>" +
44                "</tr>" +
45                "</table>" +
46                "</form>";
47        }
48
49        document.getElementById("show_result").innerHTML = result;
50    };
51</script>
52<div id="show_result"></div>
53</body>
54</html>

また、今回の質問内容とはあまり関係ありませんが、HTMLの書き方が少しおかしいと感じる部分がありましたので、下に書いておきます。

tableタグの中にdivタグが存在する。
pタグの中にtableタグが存在する。

追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset=utf-8>
5    <title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title>
6</head>
7<body>
8<script>
9    var storage = localStorage;
10    var result = "";
11    var items = {
12        data1: "data2",
13        data3: "data4"
14    };
15
16    function addItem() {//setItem用関数
17        Object.keys(items).forEach(function (key) {
18            storage.setItem(key, items[key]);
19        });
20    }
21
22    function dataDelete(key) {
23        alert(key);
24        storage.removeItem(key);
25    }
26
27    function dataChange(key, changeKey) {
28        dataChangeText = document.getElementById(changeKey).value;
29        if (window.confirm(localStorage[key] + "を" + dataChangeText + "に変更します。")) {
30            localStorage[key] = dataChangeText;
31        }
32    }
33
34    window.onload = function () {
35        for (var i = 0; i < storage.length; i++) {
36            var k = storage.key(i);
37
38            result += "<form name='js'>" +
39                "<table border='1' cellspacing='0' cellpadding='0'>" +
40                "<tr>" +
41                "<td width='100'>" +
42                k +
43                "</td>" +
44                "<td width='200'>" +
45                storage.getItem(k) +
46                "</td>" +
47                "<td width='100'>" +
48                "<input id='k" + i + "' type='text' value='" + k + "'>" +
49                "<input type='submit' value='削除' onclick='dataDelete(\"" + k + "\")'>" +
50                "<input id='change_k" + i + "' type='text' value='" + localStorage[k] + "'>" +
51                "<input type='submit' value='変更' onclick='dataChange(\"" + k + "\", \"change_k" + i + "\")'>" +
52                "</td>" +
53                "</tr>" +
54                "</table>" +
55                "</form>";
56        }
57
58        document.getElementById("show_result").innerHTML = result;
59    };
60</script>
61<div id="show_result"></div>
62</body>
63</html>