javascript について

###JavaScriptの課題について

JavaScriptの研修を受けている初心者です。
課題で不明な点がいくつかあり、ご質問させて頂きます。

課題は以下の通りです。
「テキストボックスに「リンク名」と「URL」を入力しボタンをクリックすると、入力されたリンク名とリンク先URLが設定されたa要素を追加するプログラムを作成してください。」

###発生している問題、疑問点
1,ボタンを押しても文字が表示されない
2,そもそも1を修正して表示されるようになったとしても
正確な処理が行われているか疑問。
間違っているとしたら、どの部分を、どのように修正すれば良いか。
（なぜ、間違っているかもご教示頂けるとありがたいです。）

大変お手数をおかけしますが、できれば小中学生でも分かるような説明で
ご解説頂けると幸いです。

  <!DOCTYPE html>
  <html lang="ja">
      <head>
          <meta charset="UTF-8">
          <title>要素の作成・追加</title>
          <script>
          function add_element(){
             var inputText = document.getElementById("txt");
             var inputUrl = document.getElementById("url");
             var element_a = document.createElement('a');
             element_a.innerHTML ='inputUrl';
             element_a.appendChild(inputText);
             var output = document.getElementById('output');
             output.appendChild(element_a);
          }
          window.onload = function(){
              var add = document.addEventListener('add');
              add.addEventListener('click',add_element,false);
          }
          </script>
      </head>
      <body>
         <form>
              <p>
              リンク名:
              <input type="text" id="txt" value="">
              URL:
              <input type="text" id="url" value="">
              <button id ="add">リンク追加</button> 
              </p>
         </form>
          <div id="output"></div>
      </body>
  </html>

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

回答1件

ベストアンサー

javascript
1document.getElementById()

というのは、HTMLの要素を取得する関数となります。

javascript
1document.getElementById("txt")
2```では、HTMLの【input要素全体】を取得する指定となるため、
3入力された値を取得するには、
4```javascript
5document.getElementById("txt").value

と指定しないと、入力された値は取得できません。

javascript
1var element_a = document.createElement('a');
2element_a.innerHTML ='inputUrl';
3element_a.appendChild(inputText);

「element_a」というaタグの要素に対して、リンク先のURLを指定するには、

element_a.href="http://"

と指定しますので、最終的に下記のように記述すれば、
希望通りの動作を実行できると思います。

HTML
1<!DOCTYPE html>
2  <html lang="ja">
3      <head>
4          <meta charset="UTF-8">
5          <title>要素の作成・追加</title>
6          <script>
7          function add_element(e){
8             e.preventDefault();	//イベント動作を停止
9             var inputText = document.getElementById("txt").value;	 //#txtの値を取得
10             var inputUrl = document.getElementById("url").value;	//#urlの値を取得
11             var element_a = document.createElement('a');		//<a>要素を作成
12             element_a.innerHTML =inputText;	//<a>タグのラベルを指定
13             element_a.href = inputUrl;	//<a>タグのURLを指定
14             var output = document.getElementById('output');
15             output.appendChild(element_a);	//#output要素にリンクを挿入
16            
17          }
18          window.onload = function(){
19              var add = document.getElementById("add");
20              add.addEventListener('click',add_element,false);
21          }
22          </script>
23      </head>
24      <body>
25         <form>
26              <p>
27              リンク名:
28              <input type="text" id="txt" value="">
29              URL:
30              <input type="text" id="url" value="">
31              <button id ="add">リンク追加</button> 
32              </p>
33         </form>
34          <div id="output"></div>
35      </body>
36  </html>

投稿2017/04/09 16:14

編集2017/04/09 16:16

chieeeeno

総合スコア217

gorira6

2017/04/10 06:41

とても丁寧で分かりやすいご回答を頂き、本当にありがとうございます！疑問点が解消しました。ただ、度重なるご質問申し訳ないのですが、もう一点だけお聞きしたい事があります。今回、テキストボックス内の文字がブラウザへ出力されないのは、form要素が原因だと思うのですが、何故、form要素がある事で文字が消える(一瞬しか出力されない)のか、理由をご解説頂きたいです。大変お手数かとは思いますが、よろしくお願い致します。

chieeeeno

2017/04/10 14:53 編集

文字が消えるというか、<form>タグで囲っているところに、<button>タグでsubmitをしているので、画面がformの送信が実行されていて、画面がリフレッシュしていると思いますね。なので、上記のサンプルでは、「e.preventDefault(); 」でformのクリックイベントを無効化しています。【サンプル】 https://codepen.io/chieeeeno/pen/XMvPVa

gorira6

2017/04/11 08:04

ご返信有り難うございます。やっと納得、理解できました！教えて頂き有り難うございます！

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