打印陣列列表

我對網絡開發非常陌生，並且試圖創建一個網站，允許用戶輸入他們最喜歡的網站鏈接，然後在文本框下面打印這些鏈接。鏈接打印後，必須可供用戶點擊。但是我遇到的問題是我的程序不允許用戶輸入多個鏈接，它只是更新第一個輸入。打印陣列列表

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

打印陣列列表

回答

相關問題