質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
textbox

HTMLの<input type="text">で生成されるtextboxに関するタグです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

6726閲覧

javascript について

gorira6

総合スコア12

textbox

HTMLの<input type="text">で生成されるtextboxに関するタグです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2017/04/09 15:19

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問