从javascript数组生成html无序列表

我有点问题。我正在尝试从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>

我希望它看起来像这样：

•Name1

•Name1,Name2

•Name1
•Name2

---

如果查看代码，您只创建了一个

li

，其中所有

名称都作为内容。您要做的是循环您的
名称
，并为每个名称创建一个单独的
li
，对吗

更改：

nameList += "<li>" + names + "</li>";

nameList+=”
“+names+”
”；

致：

nameList=”“；
for（var i=0，name；name=names[i]；i++）{
姓名列表+=“
”+姓名+“
”；
}


如果您对一些更好的实践感兴趣，可以在此处查看您的逻辑重写：
function submit（）
{
var name=document.getElementById（“输入”）；
var theName=name.value；
name.push（名称）；
document.getElementById（“名称”）.innerHTML=“”；
对于（var I=0；I”+名称[I]+“”；
document.getElementById（“name”）.innerHTML+=名称列表；
}
}

当您使用数组时，当您打印数组时，JavaScript将显示该数组的所有条目，并用逗号分隔。您需要迭代数组以使其工作。但是，您可以对此进行优化：


var name=[]；
函数displayUserName（）
{
var theName=document.getElementById（“输入”）.value；
如果（theName==“”| | theName.length==0）
{
return false；//由于值为空，请停止函数。
}
name.push（名称）；
document.getElementById（“name”）.children[0].innerHTML++=“
”+名称[names.length-1]+“
”；
}










添加产品






var产品=[]；
var productInput=document.getElementById（“新产品”）；
var addButton=document.getElementsByTagName（“按钮”）[0]；
var productListHtml=“”；
var-abc=0；
addButton.addEventListener（“单击”，addProduct）；
函数addProduct（）{
products.push（productInput.value）；
productList（）；
}
函数productList（）{
productListHtml+=“
”+产品[abc]+“
”；
document.getElementById（“产品”）.innerHTML=productListHtml；
abc++；
}                


没有解释是不好的，但这一解释实际上产生了错误的结果。您可能应该解释代码解决了什么问题，以及如何解决。代码本身很少有助于教学（而回答问题却构成了“教学”）。@FelixKling忽略了+=它现在已经不存在了。谢谢！这对我很有帮助，现在我可以用css使它变得漂亮了。：）注意，循环不能很好地处理“空”名称。但是这样的验证逻辑是由OP来实现的。如果我这样做，它看起来会更好一些，但是现在我仍然在另一个列表项中得到以前的结果，如果我现在输入Name2，它不是第二个列表项，而是第三个列表项，Name1是第一个和第二个列表项。@marceljager是，您将
nameList
作为
submit
闭包之外的变量，因此它总是附加相同的项。我已经更新了我的答案，以便在每次提交呼叫时，
nameList
自动清空。这应该可以为您做到：）旁注：不要在内联事件处理程序中使用名为“submit”的自定义函数。一旦将元素放入表单中，
submit
将引用
元素的提交方法。此外，您的
div
元素应该是
ul
元素。
nameList = "";
for (var i = 0, name; name = names[i]; i++) {
  nameList += "<li>" + name + "</li>";
}

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

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