I am trying to add more links to this drop down menu, the menu itself works and the links I've provided works as well, the problem is that when I try to add links through a Javascript file using appendChild, nothing seems to be happening. Also the form handling is successful in other codes, the only thing wrong is what is described above.
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);
}
So I try to append new to 'y', but nothing happens in the actual drop down menu, no is added.
That is because you are using a submit button. The submit button tells the browser to send the contents of the form to the server side.
What you want to do is change the submit button to a regular button and add an onclick event.