回答編集履歴
7
テキスト修正
test
CHANGED
|
@@ -123,3 +123,69 @@
|
|
|
123
123
|
```
|
|
124
124
|
|
|
125
125
|
を追加するとよいかと思います。
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
**補足2**
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
以下、`<form>` を使った場合の一例です。
|
|
136
|
+
|
|
137
|
+
`リンク追加` を `type="submit"` のボタンにして、イベントハンドラ`add_element`を`<form>`の`submit`イベント発生時に設定しています。
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
|
|
143
|
+
<div id="box">
|
|
144
|
+
|
|
145
|
+
<form>
|
|
146
|
+
|
|
147
|
+
リンク名:<input type="text" name="link_name" />
|
|
148
|
+
|
|
149
|
+
URL:<input type="text" name="link_url" />
|
|
150
|
+
|
|
151
|
+
<input id="add" type="submit" value="リンク追加" />
|
|
152
|
+
|
|
153
|
+
</form>
|
|
154
|
+
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
```javascript
|
|
160
|
+
|
|
161
|
+
window.onload = function() {
|
|
162
|
+
|
|
163
|
+
document.forms[0].addEventListener('submit', add_element, false);
|
|
164
|
+
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
function add_element(e) {
|
|
170
|
+
|
|
171
|
+
e.preventDefault();
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
var element_p = document.createElement('p');
|
|
176
|
+
|
|
177
|
+
var form = e.target;
|
|
178
|
+
|
|
179
|
+
element_p.innerHTML = '<a href = "' + form.link_url.value + '">' + form.link_name.value + '</a>';
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
var box = document.getElementById('box');
|
|
184
|
+
|
|
185
|
+
box.appendChild(element_p);
|
|
186
|
+
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
※上記と同じものを、[https://jsfiddle.net/jun68ykt/0sby9jca/2/](https://jsfiddle.net/jun68ykt/0sby9jca/2/) にも上げておきました。
|
6
テキスト修正
test
CHANGED
|
@@ -91,3 +91,35 @@
|
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
以上、参考になれば幸いです。
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
**補足**
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
上記に書いたように、この用途であれば、必ずしも `<form>`が必要というわけではありませんが、何らかの理由によって、`<form>` を使う必要があるのであれば、ご質問のコードにある、
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
```javascript
|
|
108
|
+
|
|
109
|
+
element_p.innerHTML = '<a href = " ' + form.link_url.value + ' ">' + form.link_name.value + '</a>';
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
の直前で、変数 `form` を宣言、初期化するには、上記の行の前に、
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
```javascript
|
|
120
|
+
|
|
121
|
+
var form = document.forms[0];
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
を追加するとよいかと思います。
|
5
テキスト修正
test
CHANGED
|
File without changes
|
4
テキスト修正
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
- では、 `form`をどこかで
|
|
11
|
+
- では、 `var form`をどこかで宣言しようと考えてみるけれども、何らかのサーバーにリクエストを送りたいわけではないので、 そもそもHTMLのほうで`<form>`が必要というわけではない。
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
3
テキスト修正
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
- 何らかのサーバーにリクエストを送りたいわけではないので、 HTMLのほうで`<form>`は不要
|
|
11
|
+
- では、 `form`をどこかで作ろうと考えてみるけれども、そもそも何らかのサーバーにリクエストを送りたいわけではないので、 HTMLのほうで`<form>`は不要
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
2
テキスト修正
test
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
こんにちは。
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
い
|
|
3
|
+
ぱっと見で気づいた点を挙げますと、以下の４点です。
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
ぱっと見で言えることは
|
|
10
4
|
|
|
11
5
|
|
|
12
6
|
|
|
@@ -34,7 +28,7 @@
|
|
|
34
28
|
|
|
35
29
|
|
|
36
30
|
|
|
37
|
-
上記を修正した
|
|
31
|
+
上記を修正した一例が以下です。
|
|
38
32
|
|
|
39
33
|
|
|
40
34
|
|
1
テキスト修正
test
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
- 以下だと
|
|
21
|
+
- `element_p.innerHTML` への代入が以下のようになっているが、これだと `href` の値となるURLの前後に余分な空白が入ってしまう。
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
- `box.appenChild(element_p);`
|
|
33
|
+
- `box.appenChild(element_p);` の`appenChild`はスペルミス。正しくは `appendChild`
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|