Javascript 将输入推送到数组列表，并用新列表更新内容

这样，当我在输入中写入内容时，就不会用我在输入中写入的新内容更新数组列表

我尝试输入名称，但它不会将其添加到数组中

var name=[“拉尔斯”、“彼得”、“简”、“伊恩”]；
var li=names.map（函数（名称）{
返回“
”.concat（名称）.concat（
”）
});
document.getElementById（“ul”）.innerHTML=“
”+li.join（“”+”
”；
document.getElementById（“btn”）.onclick=addName；
函数addName（e）{
var inputVale=document.getElementById（“名称”）.value；
names.push（inputVale）；//尝试将输入推送到此处的名称。。。
console.log（名称）；
e、 预防默认值（）；
}

添加名称

这里的问题是您正在更新数组，但它没有绑定到HTML。要解决这个问题，您可以使用一个将HTML绑定到数组的框架（即Angular、React），也可以在单击按钮后手动更新HTML

以下是一个例子：

var name=[“拉尔斯”、“彼得”、“简”、“伊恩”]；
document.getElementById（“btn”）.onclick=addName；
函数resetHTML（）{
var li=names.map（函数（名称）{
返回“
”+名称+”
”；
});
document.getElementById（“ul”）.innerHTML=“
”+li.join（“”+”
”；
}
函数addName（e）{
var inputVale=document.getElementById（“名称”）.value；
names.push（inputVale）；//尝试将输入推送到此处的名称。。。
console.log（名称）；
重置HTML（）；
e、 预防默认值（）；
}
重置HTML（）

添加名称
这里的问题是您正在更新数组，但它没有绑定到HTML。要解决这个问题，您可以使用一个将HTML绑定到数组的框架（即Angular、React），也可以在单击按钮后手动更新HTML

以下是一个例子：


var name=[“拉尔斯”、“彼得”、“简”、“伊恩”]；
document.getElementById（“btn”）.onclick=addName；
函数resetHTML（）{
var li=names.map（函数（名称）{
返回“
”+名称+”
”；
});
document.getElementById（“ul”）.innerHTML=“
”+li.join（“”+”
”；
}
函数addName（e）{
var inputVale=document.getElementById（“名称”）.value；
names.push（inputVale）；//尝试将输入推送到此处的名称。。。
console.log（名称）；
重置HTML（）；
e、 预防默认值（）；
}
重置HTML（）

添加名称
您的阵列与屏幕上显示的元素无关。目前，您只需在开始时在数组中循环一次，然后将数组内容添加到HTML中

相反，您需要在每次添加新名称时更新HTML，以使其代表您的数组。可以通过创建一个函数来实现这一点，该函数负责将数组内容显示到HTML中。这里我调用这个函数
updateHMTL
，它接受一个数组

请参见下面的工作示例：


var name=[“拉尔斯”、“彼得”、“简”、“伊恩”]；
document.getElementById（“btn”）.onclick=addName；
函数addName（e）{
var inputVale=document.getElementById（“名称”）.value；
names.push（inputVale）；//尝试将输入推送到此处的名称。。。
更新HTML（名称）；
e、 预防默认值（）；
}
函数updateHTML（名称）{
var li=names.map（函数（名称）{
返回“
”+名称+”
”；
});
document.getElementById（“ul”）.innerHTML=“
”+li.join（“”+”
”；
}
更新HTML（名称）

添加名称
您的阵列与屏幕上显示的元素无关。目前，您只需在开始时在数组中循环一次，然后将数组内容添加到HTML中

相反，您需要在每次添加新名称时更新HTML，以使其代表您的数组。可以通过创建一个函数来实现这一点，该函数负责将数组内容显示到HTML中。这里我调用这个函数
updateHMTL
，它接受一个数组

请参见下面的工作示例：


var name=[“拉尔斯”、“彼得”、“简”、“伊恩”]；
document.getElementById（“btn”）.onclick=addName；
函数addName（e）{
var inputVale=document.getElementById（“名称”）.value；
names.push（inputVale）；//尝试将输入推送到此处的名称。。。
更新HTML（名称）；
e、 预防默认值（）；
}
函数updateHTML（名称）{
var li=names.map（函数（名称）{
返回“
”+名称+”
”；
});
document.getElementById（“ul”）.innerHTML=“
”+li.join（“”+”
”；
}
更新HTML（名称）

添加名称
您可以像这样覆盖推送：

var ul = document.getElementById("ul");
var names = ["Lars", "Peter", "Jan", "Ian"];

names.push = function() { 
    Array.prototype.push.apply(this, arguments);

  // ... this will execute on each .push
  var newLi = document.createElement("li");
  newLi.appendChild(document.createTextNode(arguments[0]));
  ul.appendChild(newLi);
};

检查JSFIDLE上的完整代码
您可以像这样覆盖推送：

var ul = document.getElementById("ul");
var names = ["Lars", "Peter", "Jan", "Ian"];

names.push = function() { 
    Array.prototype.push.apply(this, arguments);

  // ... this will execute on each .push
  var newLi = document.createElement("li");
  newLi.appendChild(document.createTextNode(arguments[0]));
  ul.appendChild(newLi);
};

检查JSFIDLE上的完整代码
它会将名称添加到数组中（请参阅控制台日志）请花点时间生成一个可运行的SO代码段，以便您能清楚地说明您的观点。@NickParsons它是这样的，即它被添加到数组列表中，但当它必须显示在页面上时，它不会出现。您可以查看类似于
knockout
的库来了解类似的内容。当模型中的
observearray
发生更改时，DOM将自动更新。下面是一个具有添加和删除功能的示例：它确实会将名称添加到阵列中（请参阅控制台日志）请花点时间生成一个可运行的SO代码段，以便您能清楚地说明您的观点。@NickParsons它是这样的，即它被添加到数组列表中，但当它必须显示在页面上时，它不会出现。您可以查看类似于
knockout
的库来了解类似的内容。当模型中的
observearray
发生更改时，DOM将自动更新。下面是一个具有添加和删除功能的示例：