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> |
| ``` |
