Question

因此，我一直在尝试使js函数从输入字段中获取数据，然后将其添加到数组中，然后再将该数组显示为列表元素。我的意思是，如果我有这样的列表：

一个
两个

然后在输入框中输入“三”，然后单击“添加”，该值将添加到数组，并显示在类似

的列表中

一个
两个
三个

这是我的代码：

function pushData(){
  var i, n, slen,inputText,text;

  
  n = [""];
  slen = n.length;
  
  inputText = document.getElementById('addNew').value;
 
  
  text="<ul>";
  for(i=0;i<slen;i++){
    text+="<li>"+inputText+"</li>";
  }
  text+="</ul>";
   n.push(inputText);
  document.getElementById('lists').innerHTML = text;
}

body{
  background: gray;
}

.liste ul{
  list-style: none;
  padding: 0;
}
.liste ul li{
  padding: 15px;
  background: 	#F5F5F5;
  color: 	gray;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 0.01cm;
  text-transform: uppercase;
  transition: 0.5s;
}

.liste ul li:hover{
  font-size: 22px;
  cursor: pointer;
  color: black;
}

.liste ul li:nth-child(odd) {
  background: #DCDCDC; 
}

<input type="text" id="addNew" name="addNewList">
<button onclick="pushData()">Add</button>

<div class="liste" id="lists">
</div>

现在，当我在输入字段中输入新值时，列表中的值将被更改，而不会添加为新的列表元素。谢谢。

Answer 1

你很近：D

我更改了：

n是全局变量。
一次仅输出一个元素（无需每次都输出整个数组）。

var n = [];

function pushData(){
  inputText = document.getElementById('addNew').value;
  n.push(inputText); // This does nothing, except keep an array internally. 
  
  document.querySelector('#lists ul').innerHTML += "<li>" + inputText + "</li>";
}

body{
  background: gray;
}

.liste ul{
  list-style: none;
  padding: 0;
}
.liste ul li{
  padding: 15px;
  background: 	#F5F5F5;
  color: 	gray;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 0.01cm;
  text-transform: uppercase;
  transition: 0.5s;
}

.liste ul li:hover{
  font-size: 22px;
  cursor: pointer;
  color: black;
}

.liste ul li:nth-child(odd) {
  background: #DCDCDC; 
}

<input type="text" id="addNew" name="addNewList">
<button onclick="pushData()">Add</button>

<div class="liste" id="lists">
<ul>
</ul>
</div>

Answer 2

您需要在函数外部定义数组，因为每次您调用该函数从输入文本中添加新值时，该数组都会初始化，并且会丢失在此之前累积的值。

var n = [];
function pushData(){
  var i, slen,inputText,text;

  
  inputText = document.getElementById('addNew').value;
  n.push(inputText);
  slen = n.length;
  
  text="<ul>";
  for(i=0;i<slen;i++){
    text+="<li>"+ n[i] +"</li>";
  }
  text+="</ul>";
   
  document.getElementById('lists').innerHTML = text;
}

body{
  background: gray;
}

.liste ul{
  list-style: none;
  padding: 0;
}
.liste ul li{
  padding: 15px;
  background: 	#F5F5F5;
  color: 	gray;
  font-size: 20px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 0.01cm;
  text-transform: uppercase;
  transition: 0.5s;
}

.liste ul li:hover{
  font-size: 22px;
  cursor: pointer;
  color: black;
}

.liste ul li:nth-child(odd) {
  background: #DCDCDC; 
}

<input type="text" id="addNew" name="addNewList">
<button onclick="pushData()">Add</button>

<div class="liste" id="lists">
</div>

如何从输入框中添加新的数组元素并将其显示在列表中？

2 个答案: