こんにちは。
ぱっと見で気づいた点を挙げますと、以下の4点です。
-
function add_element()
の中で form
という変数が使われているが、使われる前に宣言、初期化されていない。
-
では、 var form
をどこかで宣言しようと考えてみるけれども、何らかのサーバーにリクエストを送りたいわけではないので、 そもそもHTMLのほうで<form>
が必要というわけではない。
-
element_p.innerHTML
への代入が以下のようになっているが、これだと href
の値となるURLの前後に余分な空白が入ってしまう。
javascript
1element_p.innerHTML = '<a href = " ' + form.link_url.value + ' ">' + form.link_name.value + '</a>';
box.appenChild(element_p);
のappenChild
はスペルミス。正しくは appendChild
上記を修正した一例が以下です。
html
1<div id="box">
2 リンク名:<input type="text" id="link_name">
3 URL:<input type="text" id="link_url">
4 <button id="add">リンク追加</button>
5</div>
javascript
1window.onload = function() {
2 var add = document.getElementById('add');
3 add.addEventListener('click', add_element, false);
4}
5
6function add_element() {
7 var link_name = document.getElementById('link_name');
8 var link_url = document.getElementById('link_url');
9
10 var element_p = document.createElement('p');
11 element_p.innerHTML = '<a href = "' + link_url.value + '">' + link_name.value + '</a>';
12
13 var box = document.getElementById('box');
14 box.appendChild(element_p);
15}
※上記と同じコードを、https://jsfiddle.net/jun68ykt/xqdn97hv/26/ にも上げました。
以上、参考になれば幸いです。
補足
上記に書いたように、この用途であれば、必ずしも <form>
が必要というわけではありませんが、何らかの理由によって、<form>
を使う必要があるのであれば、ご質問のコードにある、
javascript
1 element_p.innerHTML = '<a href = " ' + form.link_url.value + ' ">' + form.link_name.value + '</a>';
の直前で、変数 form
を宣言、初期化するには、上記の行の前に、
javascript
1var form = document.forms[0];
を追加するとよいかと思います。
補足2
以下、<form>
を使った場合の一例です。
リンク追加
を type="submit"
のボタンにして、イベントハンドラadd_element
を<form>
のsubmit
イベント発生時に設定しています。
html
1<div id="box">
2 <form>
3 リンク名:<input type="text" name="link_name" />
4 URL:<input type="text" name="link_url" />
5 <input id="add" type="submit" value="リンク追加" />
6 </form>
7</div>
javascript
1window.onload = function() {
2 document.forms[0].addEventListener('submit', add_element, false);
3}
4
5function add_element(e) {
6 e.preventDefault();
7
8 var element_p = document.createElement('p');
9 var form = e.target;
10 element_p.innerHTML = '<a href = "' + form.link_url.value + '">' + form.link_name.value + '</a>';
11
12 var box = document.getElementById('box');
13 box.appendChild(element_p);
14}
※上記と同じものを、https://jsfiddle.net/jun68ykt/0sby9jca/2/ にも上げておきました。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/11 02:55
2018/08/11 03:52
2018/08/11 04:46
2018/08/11 05:45
2018/08/11 06:03
2018/08/11 08:58
2018/08/11 09:04
2018/08/11 09:25
2018/08/11 09:29