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

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

ただいまの
回答率

90.76%

  • JavaScript

    15354questions

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

テキストボックスに入力したリンク先を要素として追加したい。

解決済

回答 1

投稿

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

JunpeiOmura

score 2

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="リンク先のURL">リンクの追加</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="リンク先のURL">リンクの追加</a>';でテキストボックスに入力した文字を持ってきたく、

var name = name.get.getElementById('name');
var URL = name.get.getElementById('url');


と宣言しているのですが、この2文のどちらか1文でも存在すると実行できなくなるのでコメントアウトしております。
なぜこの宣言があると実行できなくなるのかを教えていただきたいです。
宜しくお願いいたします。

ちなみにこちらのサイトを参考にしております
http://mitsuakikawamorita.com/blog/?p=254

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/01 17:56 編集

    name.get.getElementById は何を参考に入れられたのでしょうか?(少し文章を修正しました)

    キャンセル

  • mts10806

    2018/05/01 17:59

    ブラウザの開発ツールのコンソールをご確認ください。実行できなくなる原因がわかると思います。

    キャンセル

  • 退会済みユーザー

    2018/05/06 08:23

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+2

var name = name.get.getElementById('name');
var URL = name.get.getElementById('url');


これでは値は取れません。getElementByIdはタグにつけたIDを探しますのでタグにIDをつけ、ほしいのはvalueの値なので以下のようになります。

function add(){
    var name = document.getElementById('name').value;
    var URL = document.getElementById('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);
}
<table>
    <tr>
        <td align="right"><b> 名前:</b></td>
        <td><input id="name" type="text" name="name" size="30" maxlength="20"></td>
    </tr>

    <tr>
        <td align="right"><b> URL:</b></td>
        <td><input id="url" type="text" name="url" size="30" maxlength="20"></td>
    </tr>
</table>
<div>
    <button onclick="add();">追加</button>
</div>

<div id="piyo">
</div>


↓で実際に確認できます。
codepen

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/01 18:52

    ご回答ありがとうございます。
    参考にして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>
    ```

    キャンセル

  • 2018/05/01 19:01

    HTMLのinputタグにid="name"、id="url"が付いていないようです

    キャンセル

  • 2018/05/01 20:47

    なるほど、ありがとうございます!
    ちなみに、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>

    キャンセル

  • 2018/05/01 21:27

    javascriptにも提示したコードと違う箇所があるようです。
    一度しっかりと確認してみてください。
    (丸ごとコピペしたら動くと思います)

    キャンセル

  • 2018/05/02 16:50

    解決しました。
    ありがとうございます。

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15354questions

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