javascriptでハイパーリンクをhtmlにドロップするdiv

このドロップダウンメニューにリンクを追加しようとしていますが、メニュー自体は機能しており、私が提供したリンクもうまくいきます。リンクを追加しようとすると問題になりますappendChildを使用してJavascriptファイルを使用すると、何も起こっていないようです。また、フォーム処理は他のコードでも成功していますが、唯一間違っているのは上で説明したものです。javascriptでハイパーリンクをhtmlにドロップするdiv

dropdown.html

<body> 
<form id="aform"> 
    URL:<br> 
    <input type="text" name="URL" id="URL"> 
    <br> 
    Bookmark Name:<br> 
    <input type="text" name="bookmarkname" id="bookmarkname"> 
    <br><br> 
    <input type="submit" id="formsubmit"> 
</form> 
<div class="dropdown"> 
    <button class="dropbtn" id="dropdown">Links</button> 
    <div id="myDropdown" class="dropdown-content"> 
    <a href="https://youtube.com">Youtube</a> 
    <a href="https://www.amazon.com">Amazon</a> 
    <a href="https://www.yahoo.com">Yahoo</a> 
    </div> 
</div> 
<script src="dropdown.js"></script>

dropdown.js

function retrieveFormData() { 
      var URL = document.getElementById("URL").value; 
      var Bookmarkname = document.getElementById("bookmarkname").value; 
      var y = document.getElementById("myDropdown"); 
      var aTag = document.createElement('a'); 
      aTag.appendChild(document.createTextNode(Bookmarkname)) 
      aTag.href = URL; 
      y.appendChild(aTag); 
}

ありませんので、私は 'Y' に新たに追加しようが、何もダウンメニュー実際のドロップに起こりませんが加えられる。

出典

2017-01-08 spyang302

の可能性のある重複した[JavaScriptでdiv要素に動的にアンカータグを追加する方法？]（http://stackoverflow.com/questions/5519747/how-to-add-anchor-tags-dynamically-to- a-div-in-javascript） – misaka

最初に私がする2つのことは、javascriptのエラーをチェックしてから、アラート（y）を試みることです。あなたが実際にそれを見つけていることを確認してください。 – Jhorra

@misaka私はその情報を使用していますが、それは私のためには機能しません。全く同じコードがまだ付加されていません – spyang302

送信ボタンを使用しているためです。送信ボタンは、ブラウザにフォームの内容をサーバー側に送信するように指示します。

実行したいのは、送信ボタンを通常のボタンに変更し、onclickイベントを追加することです。

<body> 
<form id="aform"> 
    URL:<br> 
    <input type="text" name="URL" id="URL"> 
    <br> 
    Bookmark Name:<br> 
    <input type="text" name="bookmarkname" id="bookmarkname"> 
    <br><br> 
    <input type="button" id="formsubmit" onclick="retrieveFormData();" value="Submit"> 
</form> 
<div class="dropdown"> 
    <button class="dropbtn" id="dropdown">Links</button> 
    <div id="myDropdown" class="dropdown-content"> 
    <a href="https://youtube.com">Youtube</a> 
    <a href="https://www.amazon.com">Amazon</a> 
    <a href="https://www.yahoo.com">Yahoo</a> 
    </div> 
</div> 
<script src="forminput.js"></script>

出典

2017-01-08 05:23:22 spoatacus

または。イベントも機能します。 – Jacob

うわー、ええこれは何が起こっていたのはあなたにそんなに感謝しています:) – spyang302

この：

var Bookmarkname = document.getElementById("bookmarkname").value;

は... #bookmarknameの文字列値にBookmarknameを設定します。そして、あなたはこのラインを持っている：

aTag.appendChild(Bookmarkname);

appendChildはDOM Node子を追加するためです。テキストを設定するためには機能しませんので、コンテンツがないリンクを取得している可能性があります。ただし、aTag.appendChild(document.createTextNode(Bookmarkname))を実行することはできます。

出典

2017-01-08 05:17:49 Jacob

あなたの助けてくれてありがとう、でもこれを変更してもまだ動作していません – spyang302

javascriptでハイパーリンクをhtmlにドロップするdiv

答えて

関連する問題