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.
JavaScript
x
24
24
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Track your favorite websites</title>5
<meta name="author" content="791894" >6
<meta name="date" content="2019-03-01T16:33:43-0700" >7
<script type="text/javascript" src="partA.js"></script>8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">9
</head>10
<body>11
<h2>Please Complete the Following Registration</h2>12
13
<form id="register" onsubmit="addToArray();return false">14
<table>15
16
<tr><td>Enter Your URL Here</td><td><input type="text" id="url" size="25" required="true"></td></tr>17
18
</table>19
<input type="submit" value="Submit">20
</form>21
<h3><span id="showlist"></span></h3>22
</body>23
</html>24
———javascript————
JavaScript
1
48
48
1
var objectarray=[];//array2
3
4
function addToArray() {5
//read items from form and create client object6
var clientobject={url};7
//input variables into clientobject8
9
clientobject.url=document.getElementById("url").value;10
//alert("Client Name: "+clientobject.firstname+" "+clientobject.lastname);11
//load into objectarray12
objectarray.push(clientobject);13
displayList();//display object array14
15
}16
17
function displayList() {18
//variables19
var clientlist="";//this will be the list of elements in the array list20
var displayRadiobuttons="";//display elements as a list of radio buttons21
22
for (var i=0;i<objectarray.length;i++) 23
{24
//local instance of clientobject25
var clientobject={url};26
clientobject=objectarray[i];27
clientlist= clientobject.url;28
//create radio button tags and elements29
displayRadiobuttons+="<input type=radio name=listitem ";30
displayRadiobuttons+=" value="+i+" ";31
displayRadiobuttons+=" onchange=deleteItem(this.value)>";32
displayRadiobuttons+=clientlist+"<br>";33
34
35
}36
//display list37
document.getElementById("showlist").innerHTML=displayRadiobuttons;38
39
}40
41
//delete item from objectarry at index i using splice42
function deleteItem(i) {43
//delete ONE item at index i 44
objectarray.splice(i,1);45
//display modified list46
displayList();47
}48
Advertisement
Answer
Just enclose the radio tag with the a tag while displaying the list
JavaScript
1
47
47
1
var objectarray=[];//array2
3
4
function addToArray() {5
//read items from form and create client object6
var clientobject={url};7
//input variables into clientobject8
9
clientobject.url=document.getElementById("url").value;10
//alert("Client Name: "+clientobject.firstname+" "+clientobject.lastname);11
//load into objectarray12
objectarray.push(clientobject);13
displayList();//display object array14
15
}16
17
function displayList() {18
//variables19
var clientlist="";//this will be the list of elements in the array list20
var displayRadiobuttons="";//display elements as a list of radio buttons21
22
for (var i=0;i<objectarray.length;i++) 23
{24
//local instance of clientobject25
var clientobject={url};26
clientobject=objectarray[i];27
clientlist= clientobject.url;28
//create radio button tags and elements29
displayRadiobuttons+="<a href=https://"+clientobject.url+" target='_blank'><input type=radio name=listitem ";30
displayRadiobuttons+=" value="+i+" ";31
displayRadiobuttons+=" onchange=deleteItem(this.value)>";32
displayRadiobuttons+=clientlist+"</a><br>";33
34
35
}36
//display list37
document.getElementById("showlist").innerHTML=displayRadiobuttons;38
39
}40
41
//delete item from objectarry at index i using splice42
function deleteItem(i) {43
//delete ONE item at index i 44
objectarray.splice(i,1);45
//display modified list46
displayList();47
}JavaScript
1
23
23
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Track your favorite websites</title>5
<meta name="author" content="791894" >6
<meta name="date" content="2019-03-01T16:33:43-0700" >7
<script type="text/javascript" src="partA.js"></script>8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">9
</head>10
<body>11
<h2>Please Complete the Following Registration</h2>12
13
<form id="register" onsubmit="addToArray();return false">14
<table>15
16
<tr><td>Enter Your URL Here</td><td><input type="text" id="url" size="25" required="true"></td></tr>17
18
</table>19
<input type="submit" value="Submit">20
</form>21
<h3><span id="showlist"></span></h3>22
</body>23
</html>