I’m trying to create an application that will track an web pages and as user add a new URL, the links will appear on the web page below the input box. I want to convert the URL to an ‘anchor’ tag and store the tag as a string in an array. I can get an output but I don’t know how to convert url to and achor tag. This is what I have for html and javascript. Overall, I’m trying to modify the hyper link so that when the user selects a link, the page will appear in a new tab.To enable this, like ‘target=”_blank” within the ‘’ tag.
<!DOCTYPE html> <html> <head> <title>Track your favorite websites</title> <meta name="author" content="791894" > <meta name="date" content="2019-03-01T16:33:43-0700" > <script type="text/javascript" src="partA.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h2>Please Complete the Following Registration</h2> <form id="register" onsubmit="addToArray();return false"> <table> <tr><td>Enter Your URL Here</td><td><input type="text" id="url" size="25" required="true"></td></tr> </table> <input type="submit" value="Submit"> </form> <h3><span id="showlist"></span></h3> </body> </html>
———javascript————
var objectarray=[];//array function addToArray() { //read items from form and create client object var clientobject={url}; //input variables into clientobject clientobject.url=document.getElementById("url").value; //alert("Client Name: "+clientobject.firstname+" "+clientobject.lastname); //load into objectarray objectarray.push(clientobject); displayList();//display object array } function displayList() { //variables var clientlist="";//this will be the list of elements in the array list var displayRadiobuttons="";//display elements as a list of radio buttons for (var i=0;i<objectarray.length;i++) { //local instance of clientobject var clientobject={url}; clientobject=objectarray[i]; clientlist= clientobject.url; //create radio button tags and elements displayRadiobuttons+="<input type=radio name=listitem "; displayRadiobuttons+=" value="+i+" "; displayRadiobuttons+=" onchange=deleteItem(this.value)>"; displayRadiobuttons+=clientlist+"<br>"; } //display list document.getElementById("showlist").innerHTML=displayRadiobuttons; } //delete item from objectarry at index i using splice function deleteItem(i) { //delete ONE item at index i objectarray.splice(i,1); //display modified list displayList(); }
Advertisement
Answer
Just enclose the radio tag with the a tag while displaying the list
var objectarray=[];//array function addToArray() { //read items from form and create client object var clientobject={url}; //input variables into clientobject clientobject.url=document.getElementById("url").value; //alert("Client Name: "+clientobject.firstname+" "+clientobject.lastname); //load into objectarray objectarray.push(clientobject); displayList();//display object array } function displayList() { //variables var clientlist="";//this will be the list of elements in the array list var displayRadiobuttons="";//display elements as a list of radio buttons for (var i=0;i<objectarray.length;i++) { //local instance of clientobject var clientobject={url}; clientobject=objectarray[i]; clientlist= clientobject.url; //create radio button tags and elements displayRadiobuttons+="<a href=https://"+clientobject.url+" target='_blank'><input type=radio name=listitem "; displayRadiobuttons+=" value="+i+" "; displayRadiobuttons+=" onchange=deleteItem(this.value)>"; displayRadiobuttons+=clientlist+"</a><br>"; } //display list document.getElementById("showlist").innerHTML=displayRadiobuttons; } //delete item from objectarry at index i using splice function deleteItem(i) { //delete ONE item at index i objectarray.splice(i,1); //display modified list displayList(); }
<!DOCTYPE html> <html> <head> <title>Track your favorite websites</title> <meta name="author" content="791894" > <meta name="date" content="2019-03-01T16:33:43-0700" > <script type="text/javascript" src="partA.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h2>Please Complete the Following Registration</h2> <form id="register" onsubmit="addToArray();return false"> <table> <tr><td>Enter Your URL Here</td><td><input type="text" id="url" size="25" required="true"></td></tr> </table> <input type="submit" value="Submit"> </form> <h3><span id="showlist"></span></h3> </body> </html>