teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問テキストボックスで入力して、json形式で出力

編集履歴

質問編集履歴

2

ソースコード変更

2018/10/22 08:36

投稿

ueno_apple
ueno_apple

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,74 +1,10 @@
1
- <html>
2
-
3
- <head>
4
-
5
- <script src="bookmark.js"></script>
1
+ Chrome拡張機能として、入力した値をjson形式にして"http://localhost:8080/SBMSystem/Bookmark"に送る機能にしたいです。
6
-
7
- </head>
8
-
9
- <body>
10
-
11
- <form>
12
-
13
- <table>
14
2
 
15
3
 
16
4
 
17
- <tr>
5
+ しかし、bookmark.htmlに記述した、<button type="submit" name="WA" onclick="getValue();">送信</button> の部分でエラーが出てしまいます。
18
6
 
19
- <td align="right"><b> user：</b></td>
20
-
21
- <td><input type="text" id="id1" size="30" maxlength="20"></td>
22
-
23
- </tr>
24
-
25
- <tr>
26
-
27
- <td align="right"><b> URL：</b></td>
7
+ HTMLをブラウザで表示したときはうまく動きますが、Chrom拡張として動かすとうまくいきません。なぜエラーが出るのか、どう対処したらいいのか教えてください。
28
-
29
- <td><input type="text" id="id2" size="30" maxlength="20"></td>
30
-
31
- </tr>
32
-
33
- <tr>
34
-
35
- <td align="right"><b> comment：</b></td>
36
-
37
- <td><input type="text" id="id3" size="30" maxlength="20"></td>
38
-
39
- </tr>
40
-
41
- <tr>
42
-
43
- <td align="right"><b> tag：</b></td>
44
-
45
- <td><input type="text" id="id4" size="30" maxlength="20"></td>
46
-
47
- </tr>
48
-
49
- <tr>
50
-
51
- <td></td>
52
-
53
- <td>
54
-
55
- <input type="button" value="送信" onclick="getValue();">
56
-
57
- <input type="reset" value="リセット">
58
-
59
- </td>
60
-
61
- </tr>
62
-
63
-
64
-
65
- </table>
66
-
67
- </form>
68
-
69
- </body>
70
-
71
- </html>
72
8
 
73
9
 
74
10
 
@@ -76,59 +12,43 @@
76
12
 
77
13
 
78
14
 
15
+ 【manifest.json】
79
16
 
17
+ {
80
18
 
81
- 【bookmark.js】
19
+ "manifest_version": 2,
82
20
 
21
+
22
+
83
- function getValue() {
23
+ "name": "SBM",
24
+
25
+ "description": "Bookmarks",
26
+
27
+ "version": "1.0",
28
+
29
+
30
+
31
+ "icons": {"16":"icon16.png"},
84
32
 
85
33
 
86
34
 
87
- let user = document.getElementById(id1);
35
+ "browser_action": {
88
36
 
89
- let bookmark = document.getElementById(id2);
37
+ "default_icon": "icon.png",
90
38
 
91
- let comment = document.getElementById(id3);
39
+ "default_popup": "bookmark.html"
92
40
 
93
- let tag = document.getElementById(id4);
41
+ },
94
42
 
95
43
 
96
44
 
97
- let obj = {
45
+ "permissions": [
98
46
 
99
- "@context": "http://www.w3.org/ns/anno.jsonld",
47
+ "bookmarks"
100
48
 
101
- "type": "Annotation",
49
+ ]
102
50
 
103
-
104
-
105
- "motivation": "bookmarking",
51
+
106
-
107
- "creator": "http://localhost:8080/userID/UUID/" + user,
108
-
109
- "target": bookmark,
110
-
111
- "body": [{
112
-
113
- "id": "http://localhost:8080/comment",
114
-
115
- "value": comment,
116
-
117
- "purpose": "commenting"
118
-
119
- },
120
-
121
- {
122
-
123
- "id": " http://localhost:8080/Tag/" + tag,
124
-
125
- "purpose": "tagging"
126
-
127
- }]
128
-
129
- }
130
-
131
- let json = JSON.stringify(obj);
132
52
 
133
53
  }
134
54
 
@@ -138,6 +58,96 @@
138
58
 
139
59
 
140
60
 
141
- 「user」「bookmark」「comment」「tag」を入力してjson形式の指定の箇所に代入するコードを書きたいです。
61
+ 【bookmark.html】
142
62
 
63
+
64
+
65
+ <html>
66
+
67
+ <head>
68
+
69
+
70
+
143
- consoleに出力しても代入箇所がnullになってしまうため解決方法を教えてほしいです。
71
+ <script src="bookmark.js"></script>
72
+
73
+
74
+
75
+ </head>
76
+
77
+ <body>
78
+
79
+
80
+
81
+
82
+
83
+ <form name="ja" method="post" action="http://localhost:8080/SBMSystem/Bookmark">
84
+
85
+ <table>
86
+
87
+
88
+
89
+ <tr>
90
+
91
+ <td align="right"><b> name：</b></td>
92
+
93
+ <td><input type="text" name="user" size="30" maxlength="20"></td>
94
+
95
+ </tr>
96
+
97
+
98
+
99
+ <tr>
100
+
101
+ <td align="right"><b> URL：</b></td>
102
+
103
+ <td><input type="text" name="bookmark" size="30" value="URLが入ってます"></td>
104
+
105
+ </tr>
106
+
107
+
108
+
109
+ <tr>
110
+
111
+ <td align="right"><b> comment：</b></td>
112
+
113
+ <td><input type="text" name="comment" size="30" ></td>
114
+
115
+ </tr>
116
+
117
+
118
+
119
+ <tr>
120
+
121
+ <td align="right"><b> tag：</b></td>
122
+
123
+ <td><input type="text" name="tag" size="30" maxlength="20"></td>
124
+
125
+ </tr>
126
+
127
+
128
+
129
+ <tr>
130
+
131
+ <td></td>
132
+
133
+ <td>
134
+
135
+ <button type="submit" name="WA" onclick="getValue();">送信</button>
136
+
137
+ </td>
138
+
139
+ </tr>
140
+
141
+
142
+
143
+
144
+
145
+ </table>
146
+
147
+ </form>
148
+
149
+
150
+
151
+ </body>
152
+
153
+ </html>

1

目的だけ書いて、コードを丸投げしていたため

2018/10/22 08:36

投稿

ueno_apple
ueno_apple

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,26 +1,134 @@
1
- {
1
+ <html>
2
2
 
3
- "@context": "http://www.w3.org/ns/anno.jsonld",
3
+ <head>
4
4
 
5
- "type": "Annotation",
5
+ <script src="bookmark.js"></script>
6
6
 
7
- "motivation": "bookmarking",
7
+ </head>
8
8
 
9
- "creator":"http://localhost:8080/userID/UUID/ユーザー名"
9
+ <body>
10
10
 
11
- "target":"ブックマークするURL"
11
+ <form>
12
12
 
13
- "body":[{"id":"http://localhost:8080/comment",
13
+ <table>
14
14
 
15
- "value":"ブックマークするときにつけるコメント",
16
15
 
17
- "purpose":"commenting"},
18
16
 
19
- {"id":" http://localhost:8080/Tag/タグ",
17
+ <tr>
20
18
 
21
- "purpose":"tagging"}
19
+ <td align="right"><b> user：</b></td>
22
20
 
21
+ <td><input type="text" id="id1" size="30" maxlength="20"></td>
22
+
23
+ </tr>
24
+
25
+ <tr>
26
+
27
+ <td align="right"><b> URL：</b></td>
28
+
29
+ <td><input type="text" id="id2" size="30" maxlength="20"></td>
30
+
31
+ </tr>
32
+
33
+ <tr>
34
+
35
+ <td align="right"><b> comment：</b></td>
36
+
37
+ <td><input type="text" id="id3" size="30" maxlength="20"></td>
38
+
39
+ </tr>
40
+
41
+ <tr>
42
+
43
+ <td align="right"><b> tag：</b></td>
44
+
45
+ <td><input type="text" id="id4" size="30" maxlength="20"></td>
46
+
47
+ </tr>
48
+
49
+ <tr>
50
+
51
+ <td></td>
52
+
53
+ <td>
54
+
55
+ <input type="button" value="送信" onclick="getValue();">
56
+
57
+ <input type="reset" value="リセット">
58
+
59
+ </td>
60
+
61
+ </tr>
62
+
63
+
64
+
65
+ </table>
66
+
67
+ </form>
68
+
69
+ </body>
70
+
71
+ </html>
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+ 【bookmark.js】
82
+
83
+ function getValue() {
84
+
85
+
86
+
87
+ let user = document.getElementById(id1);
88
+
89
+ let bookmark = document.getElementById(id2);
90
+
91
+ let comment = document.getElementById(id3);
92
+
93
+ let tag = document.getElementById(id4);
94
+
95
+
96
+
97
+ let obj = {
98
+
99
+ "@context": "http://www.w3.org/ns/anno.jsonld",
100
+
101
+ "type": "Annotation",
102
+
103
+
104
+
105
+ "motivation": "bookmarking",
106
+
107
+ "creator": "http://localhost:8080/userID/UUID/" + user,
108
+
109
+ "target": bookmark,
110
+
111
+ "body": [{
112
+
113
+ "id": "http://localhost:8080/comment",
114
+
115
+ "value": comment,
116
+
117
+ "purpose": "commenting"
118
+
119
+ },
120
+
121
+ {
122
+
123
+ "id": " http://localhost:8080/Tag/" + tag,
124
+
125
+ "purpose": "tagging"
126
+
23
- ]
127
+ }]
128
+
129
+ }
130
+
131
+ let json = JSON.stringify(obj);
24
132
 
25
133
  }
26
134
 
@@ -30,74 +138,6 @@
30
138
 
31
139
 
32
140
 
33
- 「ユーザ名」「ブックマークするURL」「ブックマークするときにつけるコメント」「タグ」にユーザが入力し、上記のjson形式にするJavaScriptとHTMLのコードを教えてほしいです。
141
+ 「user」「bookmark」「comment」「tag」を入力してjson形式の指定の箇所に代入するコードを書きたいです。
34
142
 
35
-
36
-
37
- 以下のコードまで出来ましたが、これを使っても、まったく別のでも構いません、お願いします。
143
+ consoleに出力しても代入箇所がnullになってしまうため解決方法を教えてほしいです。
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
- <script type="text/javascript">
52
-
53
-
54
-
55
- let user
56
-
57
- let bookmark
58
-
59
- let comment
60
-
61
- let tag
62
-
63
-
64
-
65
-
66
-
67
- let obj = {
68
-
69
- "@context": "http://www.w3.org/ns/anno.jsonld",
70
-
71
- "type": "Annotation",
72
-
73
- "motivation": "bookmarking",
74
-
75
- "creator": "http://localhost:8080/userID/UUID/" + user,
76
-
77
- "target": bookmark,
78
-
79
- "body": [{"id": "http://localhost:8080/comment",
80
-
81
- "value": comment,
82
-
83
- "purpose": "commenting"
84
-
85
- },
86
-
87
- {"id": " http://localhost:8080/Tag/" + tag,
88
-
89
- "purpose": "tagging"
90
-
91
- }
92
-
93
- ]
94
-
95
- }
96
-
97
-
98
-
99
- let json = JSON.stringify(obj);
100
-
101
-
102
-
103
- </script>