回答編集履歴

1 コード修正

chieeeeno

chieeeeno score 217

2017/04/10 01:16  投稿

```javascript
document.getElementById()
```
というのは、HTMLの要素を取得する関数となります。
```javascript
document.getElementById("txt")
```では、HTMLの【input要素全体】を取得する指定となるため、
入力された値を取得するには、
```javascript
document.getElementById("txt").value
```
と指定しないと、入力された値は取得できません。
```javascript
var element_a = document.createElement('a');
element_a.innerHTML ='inputUrl';
element_a.appendChild(inputText);
```
「element_a」というaタグの要素に対して、リンク先のURLを指定するには、
```
element_a.href="http://"
```
と指定しますので、最終的に下記のように記述すれば、
希望通りの動作を実行できると思います。
 
```HTML
<!DOCTYPE html>
 <html lang="ja">
     <head>
         <meta charset="UTF-8">
         <title>要素の作成・追加</title>
         <script>
         function add_element(e){
            e.preventDefault();   //イベント動作を停止
            var inputText = document.getElementById("txt").value;    //#txtの値を取得
            var inputUrl = document.getElementById("url").value;   //#urlの値を取得
            var element_a = document.createElement('a');       //<a>要素を作成
            element_a.innerHTML =inputText;   //<a>タグのラベルを指定
            element_a.href = inputUrl;   //<a>タグのURLを指定
            var output = document.getElementById('output');
            output.appendChild(element_a);   //#output要素にリンクを挿入
           
         }
         window.onload = function(){
             var add = document.getElementById("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>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る