Print Array List

Question

I am very new to web development and am trying to create a website that will allow the user to input their favorite website links and then print these links below the text box. After the link is printed, it has to be clickable for the user. However the problem I am running into is that my program will not allow the user to input multiple links, it simply updates the first input.

var urlList = [];

function saveUrl(){
    var site = {url};
    
    var i = 0;  
    var favSite = ""; 
    
    site.url = document.getElementById('url').value;
    var lnk = document.getElementById('lnk');
    
    urlList.push(site);
    
    for(i =0; i<urlList.length;i++){
        
        var thisSite = {url}; 
        thisSite = urlList[i];
        
        lnk.href = "http://" + thisSite.url;
        favSite = lnk.href;
        favSite+="<br>";
    }
    
    lnk.innerHTML = favSite;
}

<!DOCTYPE html>
<html>

    <head>

    <title>Favorites</title>
    <script type="text/javascript" src="attempt4.js"></script>

    </head>

    <body>
    
        <form>
        
            <input type = "text" id = "url" size = "25">
            <input type = "submit" value = "submit" onclick="saveUrl();return false">
        
        </form>
    
        <a target="_blank" href="" id=lnk></a> <br>    
           
    </body>

</html>

Why do you need to store them in an array? Just add the new link to a list directly. — ibrahim mahrir
– ibrahim mahrir, Commented Feb 25, 2017 at 20:52
Change lnk.innerHTML = favSite; to lnk.innerHTML += favSite; — Scott Marcus
– Scott Marcus, Commented Feb 25, 2017 at 20:53

ibrahim mahrir · Accepted Answer · 2017-02-25 21:00:15Z

1

No need to save the links to an array and then reprint that array each time the user enter a link. Just add the new link to the list like this:

function addLink() {
  var lnk = document.getElementById("lnk").value; // get the input value
  
  var a = document.createElement("a");   // create a new anchor element
  a.href = "http://" + lnk;              // set its href
  a.textContent = lnk;                   // set its text content
  
  var li = document.createElement("li"); // create a new list item
  li.appendChild(a);                     // add the anchor element to it
  
  var ul = document.getElementById("links"); // get the ul element
  ul.appendChild(li);                    // add the list item to it
}

<input id="lnk"/>
<button onclick="addLink()">ADD</button>
<h3>Your Links:</h3>
<ul id="links">
<ul>

answered Feb 25, 2017 at 21:00

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

struggling Over a year ago

Wow this makes a lot more sense and is much cleaner than the route I was taking. Thank you so much!

Farzin Kanzi · Accepted Answer · 2017-02-25 20:52:45Z

1

Your problem is here:

favSite = lnk.href;

It must be:

favSite += lnk.href;

answered Feb 25, 2017 at 20:52

Farzin Kanzi

3,4532 gold badges23 silver badges25 bronze badges

Comments

Scott Marcus · Accepted Answer · 2017-02-25 20:54:34Z

Just change lnk.innerHTML = favSite; to lnk.innerHTML += favSite; so that instead of setting the HTML to an entirely new value (and throwing away the old one), you append the new link onto the HTML that was already there.

var urlList = [];

function saveUrl(){
    var site = {url};
    
    var i = 0;  
    var favSite = ""; 
    
    site.url = document.getElementById('url').value;
    var lnk = document.getElementById('lnk');
    
    
    
    urlList.push(site);
    
    for(i =0; i<urlList.length;i++){
        
        var thisSite = {url}; 
        thisSite = urlList[i];
        
        lnk.href = "http://" + thisSite.url;
        favSite = lnk.href;
        favSite+="<br>";
    }
    
    lnk.innerHTML += favSite;
}

<!DOCTYPE html>
<html>

    <head>
    <title>Favorites</title>
    <script type="text/javascript" src="attempt4.js"></script>
    </head>

    <body>
    
    <form>
        
        <input type = "text" id = "url" size = "25">
        <input type = "submit" value = "submit" onclick="saveUrl();return false">
        
        </form>
    
    <a target="_blank" href="" id=lnk></a> <br>    
        
    
        
    </body>    
</html>

Collectives™ on Stack Overflow

Print Array List

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related