我遇到了一些问题。我正在尝试从javascript数组创建一个无序列表,这是我的代码:
var names = [];
var nameList = "";
function submit()
{
var name = document.getElementById("enter");
var theName = name.value;
names.push(theName);
nameList += "<li>" + names + "</li>";
document.getElementById("name").innerHTML = nameList;
}
<input id="enter" type="text">
<input type="button" value="Enter name" onclick="submit()">
<br>
<br>
<div id="name"></div>
例如,如果我发布2个名称, Name1 和 Name2 ,我的列表如下所示:
•Name1
•Name1,Name2
我希望它看起来像这样:
•Name1
•Name2
答案 0 :(得分:7)
如果您查看代码,则只需创建一个li
,并将所有names
作为内容。你想要做的是循环你的names
并为每个创建一个单独的li
,对吗?
变化:
nameList += "<li>" + names + "</li>";
为:
nameList = "";
for (var i = 0, name; name = names[i]; i++) {
nameList += "<li>" + name + "</li>";
}
如果您对某些更好的做法感兴趣,可以在此处查看您的逻辑重写:http://jsfiddle.net/rgthree/ccyo77ep/
答案 1 :(得分:4)
function submit()
{
var name = document.getElementById("enter");
var theName = name.value;
names.push(theName);
document.getElementById("name").innerHTML = "";
for (var I = 0; I < names.length; I++)
{
nameList = "<li>" + names[I] + "</li>";
document.getElementById("name").innerHTML += nameList;
}
}
您正在使用数组,当您打印数组时,JavaScript将显示以逗号分隔的数组的所有条目。您需要遍历数组以使其工作。但是你可以优化它:
var names = [];
function displayUserName()
{
var theName = document.getElementById("enter").value;
if (theName == "" || theName.length == 0)
{
return false; //stop the function since the value is empty.
}
names.push(theName);
document.getElementById("name").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";
}
<input id="enter" type="text">
<input type="button" value="Enter name" onclick="displayUserName()">
<br>
<br>
<div id="name"><ul></ul></div>
在此示例中,通过使用添加了UL
s(列表项)的li
(或无序列表)容器,HTML在语法上是正确的。
document.getElementById("name").children[0].innerHTML += "<li>"+names[names.length-1]+"</li>";
此行选择名称为name
的div及其第一个子项ul
)。然后它会将LI
附加到列表中。
正如@FelixKling所说:避免使用保留或含糊不清的名字。
答案 2 :(得分:0)
<div>
<label for="new-product">Add Product</label><br /><br /><input id="new-product" type="text"><br /><br /><button>Add</button>
</div>
<div>
<ul id="products">
</ul>
<p id="count"></p>
</div>
var products = [];
var productInput = document.getElementById("new-product");
var addButton = document.getElementsByTagName("button")[0];
var productListHtml = "";
var abc = 0;
addButton.addEventListener("click", addProduct);
function addProduct() {
products.push(productInput.value);
productList();
}
function productList() {
productListHtml += "<li>" + products[abc] + "</li>";
document.getElementById("products").innerHTML = productListHtml;
abc++;
}