Добавление гиперссылок с javascript в html drop down div

Я пытаюсь добавить дополнительные ссылки в это выпадающее меню, само меню работает, и ссылки, которые я предоставил, также работают, проблема в том, что когда я пытаюсь добавить ссылки через файл Javascript, используя appendChild, ничего похожего не происходит. Также обработка формы успешна в других кодах, единственное, что неправильно, - это то, что описано выше.Добавление гиперссылок с javascript в html drop down 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); 
}

Так я пытаюсь добавить новый к 'у', но ничего не происходит в реальной выпадающего меню, нет добавлен.

источник

2017-01-08 spyang302

Возможный дубликат [Как добавить якорные теги динамически в DIV в JavaScript?] (Http://stackoverflow.com/questions/5519747/how-to-add-anchor-tags-dynamically-to- a-div-in-javascript) – misaka

Первые две вещи, которые я бы сделал, это проверить на наличие ошибок 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

Или вызов '.preventDefault()' на событие также будет работать. – Jacob

wow haha, да это было то, что происходит, спасибо вам большое :) – 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 drop down div

ответ

Смежные вопросы