打印阵列列表

我对网络开发非常陌生，并且试图创建一个网站，允许用户输入他们最喜欢的网站链接，然后在文本框下面打印这些链接。链接打印后，必须可供用户点击。但是我遇到的问题是我的程序不允许用户输入多个链接，它只是更新第一个输入。打印阵列列表

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>

来源

2017-02-25 struggling

为什么你需要将它们存储在一个阵列？只需将新链接直接添加到列表中即可。 –

更改'lnk.innerHTML = favSite;'为'lnk.innerHTML + = favSite;' –

无需保存的链接，数组，然后用户每次输入一个链接重新打印阵列。只需添加新的链接列表如下：

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>

来源

2017-02-25 21:00:15

哇这使得更多的意义，比我所采取的路线更清洁。非常感谢！ – struggling

你的问题是在这里：

favSite = lnk.href;

它必须是：

favSite += lnk.href;

来源

2017-02-25 20:52:45

只要改变lnk.innerHTML = favSite;到lnk.innerHTML += favSite;，这样，而不是HTML设置成全新的价值（和thr将旧链接带走），则将新链接追加到已经存在的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>

来源

2017-02-25 20:54:34

打印阵列列表

回答

相关问题