Question

我是网络开发的新手，我正在尝试创建一个网站，允许用户输入自己喜欢的网站链接，然后在文本框下面打印这些链接。打印链接后，必须为用户单击该链接。但是我遇到的问题是我的程序不允许用户输入多个链接，它只是更新第一个输入。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

你的问题在这里：

favSite = lnk.href;

必须是：

favSite += lnk.href;

Answer 2

只需将lnk.innerHTML = favSite;更改为lnk.innerHTML += favSite;，这样您就可以将新链接附加到已经存在的HTML上，而不是将HTML设置为全新值（并丢弃旧值）。

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>

Answer 3

无需将链接保存到阵列，然后在每次用户输入链接时重新打印该阵列。只需将新链接添加到列表中，如下所示：

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>

打印阵列列表

3 个答案: