プログラミング(JS)研修の課題について教えてください！

JavaScriptの研修を受けている初心者です。
そこで出された課題がよくわからないのでぜひご教示いただきたく。

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

Formに入力したテキストをどう処理すればよいのかわからず以下のようにコードを書いてみました。
全然違うような気がしますが、何がどう違うのかがわからず、困っています。

ビジなーレベルのスキルでどう直すべきか、ご教示いただけますと、大変大変助かります。

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>8章課題</title>
6    <script>
7        function merge() {
8            var link_name= document.getElementById('link_name');
9            var input_url= document.getElementById('input_url');
10            var element_a = document.createElement('a');
11            element_a.innerHTML = '<a href="'+input_url+'">'+link_name+'</a>';
12            output.appendChild(element_a);
13        }
14 
15        window.onload = function() {
16            var go = document.getElementById('go');
17            go.addEventListener('click', merge, false);
18         }
19    </script>
20</head>
21
22<body>
23	<form name="input_form">
24		<label for="link_name">リンク名： </label>
25			<input type="text" name="link_name" id="link_name" size="20" maxlength="30">
26		<label for="input_url">URL： </label>
27			<input type="text" name="input_url" id="input_url" size="30" maxlength="30">
28		<button id="go">リンク追加</button>
29		<div id="output"></div>
30	</form>
31</body>
32</html>
33

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

回答2件

ベストアンサー

断片的に回答します。

link_name、input_urlの内容はgetElementByIdからvalueを参照する必要があります。

JavaScriptだけで処理する前提であれば、formのsubmitかactionを潰すか、formを使わないようにする必要があります。(submitが実行されるとリロードされて元に戻ってしまいます。)

outputはgetElementByIdで取得する必要があります。

a要素のinnerHTMLはリンク名の部分です。リンク自体はoutputのinnerHTMLにa要素自体を入れるか、a要素にsetAttributeなどをする必要があります。

投稿2014/10/28 04:53

TaMaMhyu

総合スコア1356

takatatakashi

2014/10/28 12:57

ありがとうございます！おかげさまで無事解決しました。

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

TaMaMhyu さんの提案でうまくいくと思います。

デバッグについてです。
最近のブラウザにはすべて「開発ツール」というのがついています。
その中にJavaScriptを直接入力できる欄（JavaScriptコンソール）があるので、
例えば「document.getElementById('link_name')」と入力して結果を見てみるのがよいでしょう。

JSのデバッグは基本的に HTMLを編集してリロードするのではなく、JSコンソールに入力して試してみたほうがよいです。

投稿2014/10/28 12:23