Q&A
name.get.getElementById は何を参考に入れられたのでしょうか？（少し文章を修正しました）
Javascriptを用いて、
テキストボックスに「リンク名」と「URL」を入力しボタンをクリックすると、
入力されたリンク名とリンク先URLが設定されたa要素を追加するプログラムを作成しようとしています。
現状のプログラムは以下のものです。
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>要素の作成・追加</title> <script> function add(){ //var name = name.get.getElementById('name'); //var URL = name.get.getElementById('url'); var div_element = document.createElement("div"); div_element.innerHTML = '<a href="リンク先のＵＲＬ">リンクの追加</a>'; var parent_object = document.getElementById("piyo"); parent_object.appendChild(div_element); } </script> </head> <body> <tr> <td align="right"><b> 名前：</b></td> <td><input type="text" name="name" size="30" maxlength="20"></td> </tr> <tr> <td align="right"><b> URL：</b></td> <td><input type="text" name="url" size="30" maxlength="20"></td> </tr> <div> <button onclick="add();">追加</button> </div> <div id="piyo"> </div> </body> </html>
div_element.innerHTML = '<a href="リンク先のＵＲＬ">リンクの追加</a>';でテキストボックスに入力した文字を持ってきたく、
var name = name.get.getElementById('name'); var URL = name.get.getElementById('url');
と宣言しているのですが、この２文のどちらか１文でも存在すると実行できなくなるのでコメントアウトしております。
なぜこの宣言があると実行できなくなるのかを教えていただきたいです。
宜しくお願いいたします。
ちなみにこちらのサイトを参考にしております
http://mitsuakikawamorita.com/blog/?p=254
ブラウザの開発ツールのコンソールをご確認ください。実行できなくなる原因がわかると思います。
回答1件
0
ベストアンサー
js
1var name = name.get.getElementById('name'); 2var URL = name.get.getElementById('url');
これでは値は取れません。getElementByIdはタグにつけたIDを探しますのでタグにIDをつけ、ほしいのはvalueの値なので以下のようになります。
js
1function add(){ 2 var name = document.getElementById('name').value; 3 var URL = document.getElementById('url').value; 4 var div_element = document.createElement("div"); 5 div_element.innerHTML = '<a href="'+URL+'">'+name+'</a>'; 6 var parent_object = document.getElementById("piyo"); 7 parent_object.appendChild(div_element); 8}
html
1<table> 2 <tr> 3 <td align="right"><b> 名前：</b></td> 4 <td><input id="name" type="text" name="name" size="30" maxlength="20"></td> 5 </tr> 6 7 <tr> 8 <td align="right"><b> URL：</b></td> 9 <td><input id="url" type="text" name="url" size="30" maxlength="20"></td> 10 </tr> 11</table> 12<div> 13 <button onclick="add();">追加</button> 14</div> 15 16<div id="piyo"> 17</div>
↓で実際に確認できます。
codepen
投稿2018/05/01 09:03
編集2018/05/01 12:23
総合スコア355
ご回答ありがとうございます。
参考にしてJavScriptを変えて見たのですが、同じく宣言の2文があると実行されません。
以下のようにJavaScriptを変更しました。
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>要素の作成・追加</title>
<script>
function add(){
var name = document.getElementByld('name').value;
var URL = document.getElementByld('url').value;
var div_element = document.createElement("div");
div_element.innerHTML = '<a href="'+URL+'">+name+</a>';
var parent_object = document.getElementById("piyo");
parent_object.appendChild(div_element);
}
</script>
</head>
<body>
<tr>
<td align="right"><b> 名前：</b></td>
<td><input type="text" name="name" size="30" maxlength="20"></td>
</tr>
<tr>
<td align="right"><b> URL：</b></td>
<td><input type="text" name="url" size="30" maxlength="20"></td>
</tr>
<div>
<button onclick="add();">追加</button>
</div>
<div id="piyo">
</div>
</body>
</html>
```
HTMLのinputタグにid="name"、id="url"が付いていないようです
なるほど、ありがとうございます！
ちなみに、HTMLを以下のように変更しても実行されません...
<body>
<tr>
<td align="right"><b> 名前：</b></td>
<td><input type="text" name="name" id="name" size="30" maxlength="20"></td>
</tr>
<tr>
<td align="right"><b> URL：</b></td>
<td><input type="text" name="url" id="url" size="30" maxlength="20"></td>
</tr>
<div>
<button onclick="add();">追加</button>
</div>
<div id="piyo">
</div>
</body>
javascriptにも提示したコードと違う箇所があるようです。
一度しっかりと確認してみてください。
（丸ごとコピペしたら動くと思います）
解決しました。
ありがとうございます。
あなたの回答
tips
プレビュー
