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

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

ただいまの
回答率

89.64%

formから入力された情報を取得し、その情報を元に新しく要素を追加する方法

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 609

newyee

score 151

テキストボックスに「リンク名」と「URL」を入力しボタンをクリックすると、入力されたリンク名とリンク先URLが設定されたa要素を追加するプログラムを作成したいのですが、うまくできません...
以下のコードは自分で作成したコードとなります。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>challenge_dom</title>
    <script>
        window.onload = function(){
            var add = document.getElementById('add');
            add.addEventListener('click',add_element,false);
        }
        function add_element(){
            var element_p = document.createElement('p');
            element_p.innerHTML = '<a href = " ' + form.link_url.value + ' ">' + form.link_name.value + '</a>';
            var box = document.getElementById('box');
            box.appenChild(element_p);



        }

    </script>
</head>
<body>
   <div id="box">
       <form>
           リンク名:<input type="text" name=link_name>
           URL:<input type="text" name=link_url>
           <button id="add">リンク追加</button>
       </form>
   </div>

</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

こんにちは。
ぱっと見で気づいた点を挙げますと、以下の4点です。

  • function add_element() の中で form という変数が使われているが、使われる前に宣言、初期化されていない。

  • では、 var formをどこかで宣言しようと考えてみるけれども、何らかのサーバーにリクエストを送りたいわけではないので、 そもそもHTMLのほうで<form>が必要というわけではない。

  • element_p.innerHTML への代入が以下のようになっているが、これだと  href の値となるURLの前後に余分な空白が入ってしまう。

element_p.innerHTML = '<a href = " ' + form.link_url.value + ' ">' + form.link_name.value + '</a>';
  • box.appenChild(element_p); のappenChildはスペルミス。正しくは appendChild 

上記を修正した一例が以下です。

<div id="box">
   リンク名:<input type="text" id="link_name">
   URL:<input type="text" id="link_url">
   <button id="add">リンク追加</button>
</div>
window.onload = function() {
    var add = document.getElementById('add');
    add.addEventListener('click', add_element, false);
}

function add_element() {
    var link_name = document.getElementById('link_name');
    var link_url = document.getElementById('link_url');

    var element_p = document.createElement('p');
    element_p.innerHTML = '<a href = "' + link_url.value + '">' + link_name.value + '</a>';

    var box = document.getElementById('box');
    box.appendChild(element_p);
}

※上記と同じコードを、https://jsfiddle.net/jun68ykt/xqdn97hv/26/ にも上げました。

以上、参考になれば幸いです。


補足

上記に書いたように、この用途であれば、必ずしも <form>が必要というわけではありませんが、何らかの理由によって、<form> を使う必要があるのであれば、ご質問のコードにある、

 element_p.innerHTML = '<a href = " ' + form.link_url.value + ' ">' + form.link_name.value + '</a>';

の直前で、変数 form を宣言、初期化するには、上記の行の前に、

var form = document.forms[0];


を追加するとよいかと思います。


補足2

以下、<form> を使った場合の一例です。
リンク追加 を type="submit" のボタンにして、イベントハンドラadd_element<form>submitイベント発生時に設定しています。

<div id="box">
  <form>
   リンク名:<input type="text" name="link_name" />
   URL:<input type="text" name="link_url" />
   <input id="add" type="submit" value="リンク追加" />
  </form>
</div>
window.onload = function() {
    document.forms[0].addEventListener('submit', add_element, false);
}

function add_element(e) {
    e.preventDefault();

    var element_p = document.createElement('p');
    var form = e.target;
    element_p.innerHTML = '<a href = "' + form.link_url.value + '">' + form.link_name.value + '</a>';

    var box = document.getElementById('box');
    box.appendChild(element_p);
}


※上記と同じものを、https://jsfiddle.net/jun68ykt/0sby9jca/2/ にも上げておきました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/11 18:04

    > https://codepen.io/newyee/pen/jpdwjK

    を拝見しました。以下の2行が抜けていませんか?

    var box = document.getElementById('box');
    box.appendChild(element_p);

    キャンセル

  • 2018/08/11 18:25

    チェック頂きありがとうございます。
    教えて下さった、2行の部分が抜けておりました...
    修正したところ、リンクを追加することができました。
    お手数おかけしてすみませんでした。
    長々親切に対応して下さり、ご丁寧に教えて下さり誠にありがとうございました。

    キャンセル

  • 2018/08/11 18:29

    解決されたようですね。よかったです!

    キャンセル

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

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる