回答編集履歴
2
不備の修正
test
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
id="add"をクリックしたときにリンクを追加するのではなくて、id="link"をクリックしたときにリンクを追加したいので、```document.getElementById("link")```とする必要があります。
|
|
1
|
+
下の箇所は、```<div id="add"></div>```をクリックしたときにリンクを追加するのではなくて、```<button id="link">リンク追加</button>```をクリックしたときにリンクを追加したいので、```document.getElementById("link")```とする必要があります。
|
|
2
|
+
|
|
3
|
+
```Javascript
|
|
4
|
+
|
|
5
|
+
var add = document.getElementById('add');
|
|
6
|
+
|
|
7
|
+
add.addEventListener('click', link_create, false);
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
それを踏まえて、質問者さんの実現したいことは以下のように行えると思います。
|
|
2
12
|
|
|
3
13
|
```HTML
|
|
4
14
|
|
|
@@ -24,21 +34,37 @@
|
|
|
24
34
|
|
|
25
35
|
}
|
|
26
36
|
|
|
27
|
-
|
|
37
|
+
let createPara = document.createElement("p");
|
|
28
38
|
|
|
29
|
-
|
|
39
|
+
let createAnchor = document.createElement("a");
|
|
30
40
|
|
|
31
|
-
|
|
41
|
+
let urlText = document.getElementById("urlText").value;
|
|
32
42
|
|
|
33
|
-
|
|
43
|
+
let linkText = document.getElementById("linktext").value;
|
|
34
44
|
|
|
35
|
-
|
|
45
|
+
if (urlText.match(/^(https?|ftp):\/\//)) {//URLにプロトコル部が含まれていたらプロトコル部を除いてURLエンコードする。
|
|
36
46
|
|
|
37
|
-
|
|
47
|
+
let protoArr = urlText.split("/");
|
|
38
48
|
|
|
39
|
-
|
|
49
|
+
let proto = protoArr[0] + "//";
|
|
40
50
|
|
|
51
|
+
urlText = urlText.replace(/^(https?|ftp):\/\//, "");
|
|
52
|
+
|
|
53
|
+
urlText = proto + encodeURI(urlText);
|
|
54
|
+
|
|
55
|
+
createAnchor.href = urlText;
|
|
56
|
+
|
|
57
|
+
} else {//プロトコル部がなければそのままURLエンコードをして先頭にhttp://をつける。
|
|
58
|
+
|
|
59
|
+
createAnchor.href = "http://" + encodeURI(urlText);
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
createAnchor.text = linkText;
|
|
64
|
+
|
|
65
|
+
createPara.appendChild(createAnchor);//aタグをpタグの子要素に設定。
|
|
66
|
+
|
|
41
|
-
document.getElementById("add").appendChild(createPara);
|
|
67
|
+
document.getElementById("add").appendChild(createPara);//pタグをdivタグの子要素に指定。
|
|
42
68
|
|
|
43
69
|
}
|
|
44
70
|
|
|
@@ -48,7 +74,7 @@
|
|
|
48
74
|
|
|
49
75
|
window.onload = function () {
|
|
50
76
|
|
|
51
|
-
|
|
77
|
+
let link = document.getElementById("link");//addではなくてlink。
|
|
52
78
|
|
|
53
79
|
link.addEventListener("click", link_create, false);
|
|
54
80
|
|
|
@@ -60,9 +86,17 @@
|
|
|
60
86
|
|
|
61
87
|
<body>
|
|
62
88
|
|
|
63
|
-
|
|
89
|
+
<label for="urlText">URL:
|
|
64
90
|
|
|
91
|
+
<input type="text" name="url_name" id="urlText">
|
|
92
|
+
|
|
93
|
+
</label>
|
|
94
|
+
|
|
95
|
+
<label for="linktext">リンク:
|
|
96
|
+
|
|
65
|
-
|
|
97
|
+
<input type="text" name="url_link" id="linktext">
|
|
98
|
+
|
|
99
|
+
</label>
|
|
66
100
|
|
|
67
101
|
<button id="link">リンク追加</button>
|
|
68
102
|
|
1
追記
test
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
<body>
|
|
62
62
|
|
|
63
|
-
URL:<input type="text" id="urlText">
|
|
63
|
+
URL:<input type="text" name="url_name" id="urlText">
|
|
64
64
|
|
|
65
65
|
リンク:<input type="text" name="url_link" id="linktext">
|
|
66
66
|
|