I am creating a website that will display the web in an inline frame. I want to be able to drag links from the frame to a text element that acts as an address bar also located in the page. When the items are dragged and dropped into the address bar I want the frame to redirect to the dropped link "ondrop". I will be creating the links that will be dragged as well so if code needs to be added to the links to drag their source to the address. The code I have so far is problematic, I think it is either that the text element is not getting the event or that it is getting the event but when the function fires it does not have the url to load. Here is the code- please feel free to rip it up, I have not coded in 6 years and am very rusty.

#showUrl {
border:2px solid #0A9;
Position: absolute;
#url {
function loadUrl() {
var url = document.getElementById( 'url' ).value;
var showUrl = document.getElementById( 'showUrl' );
showUrl.src = url;
<input type="text" id="url" ondragend("loadUrl())"/>
<iframe src="http://www.cnn.com" id="showUrl" ></iframe>

Please help there is a lot riding on this.

you need to fix your input box code

function loadUrl() {
url = document.getElementById("url").value;
document.getElementById("showUrl").src = url;
<input type="text" id="url" ondragend="(loadUrl())">