Javascript converting the URL to an ‘anchor’ tag and store the tag as a string in an array

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();
}

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>

Advertisement

Answer