Javascript convert text to a link

Question

I'm trying to make it so when a user inputs text in a textbox it prints it as a link that they are able to click on. Here is my code:

HTML:

<form>
<input type="text"  id="urlhtml" size ="30" placeholder="http://www.sait.ca">
<br>
<br>
<input type="submit" value="Add Url" id="submit"onclick="getUrlList(); return false">
</form>
<br>
<h2> Your favorite urls are: </h2>
<a href target ="_blank" ><h3><span id="showurls"></span>
</h3></a>

JAVASCRIPT:

 var urlList=[];
     function getUrlList () {

    var url={urlhtml};
    var i=0;
    var thisList="";

    url.urlhtml=document.getElementById("urlhtml").value;

    urlList.push(url);
        for(i=0; i< urlList.length;i++)
        {
        var thisurl={urlhtml};
        thisurl=urlList[i];
        thisList+="http://" + thisurl.urlhtml;
        thisList+="<br>";

        }
    document.getElementById("showurls").innerHTML=thisList;
}

The link gets displayed and you can click on it however it just opens up the same page and doesn't go to what the user inputted.

Any help would be really appreciated.

Answer 1

Just change code to this. You have to form a "a" attribute for each link.

var urlList = [];

function getUrlList() {

  var url = {
    urlhtml
  };
  var i = 0;
  var thisList = "";

  url.urlhtml = document.getElementById("urlhtml").value;

  urlList.push(url);
  for (i = 0; i < urlList.length; i++) {
    thisList += "<a target='blank' href='http://" + urlList[i].urlhtml + "'>" + urlList[i].urlhtml + "</a><br>";
  }
  document.getElementById("showurls").innerHTML = thisList;
}

<form>
  <input type="text" id="urlhtml" size="30" placeholder="http://www.sait.ca" value="www.google.com">
  <br>
  <br>
  <input type="submit" value="Add Url" id="submit" onclick="getUrlList(); return false">
</form>
<br>
<h2> Your favorite urls are: </h2>
<a href target="_blank"><h3><span id="showurls"></span>
</h3></a>