gpt4 book ai didi

javascript - 打印数组列表

转载 作者:行者123 更新时间:2023-11-28 18:06:28 24 4
gpt4 key购买 nike

我对网络开发非常陌生,正在尝试创建一个网站,允许用户输入他们最喜欢的网站链接,然后在文本框下方打印这些链接。打印链接后,用户必须可以点击它。然而我遇到的问题是我的程序不允许用户输入多个链接,它只是更新第一个输入。

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>

最佳答案

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

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>

关于javascript - 打印数组列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42461426/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com