将输入推向数组列表，并使用新内容更新内容

Question

是这样，当我在输入中编写某些内容时，请勿使用输入中写的新内容更新我的数组列表。

我试图将其推入名称，但不会将其添加到数组中。

var names = ["Lars", "Peter", "Jan", "Ian"];
var li = names.map(function(names) {
  return "<li>".concat(names).concat("</li>")
});
document.getElementById("ul").innerHTML = "<ul>" + li.join("") + "</ul>";
document.getElementById("btn").onclick = addName;
function addName(e) {
  var inputVale = document.getElementById("name").value;
  names.push(inputVale); //try to push input to names here...
  console.log(names);
  e.preventDefault();
}

<div id="ul"></div>
<div>
  <form>
    <input type="text" id="name">
    <button id="btn">Add name</button>
  </form>
</div>

Answer 1

这里的问题是您正在更新数组，但没有将其与HTML相关。要解决此问题，您可以使用将HTML绑定到数组的框架（即Angular，React），或者您可以在单击按钮后手动更新HTML。

这是一个示例：

var names = ["Lars", "Peter", "Jan", "Ian"];
document.getElementById("btn").onclick = addName;
function resetHTML() {
  var li = names.map(function(name) {
    return "<li>" + name + "</li>";
  });
  document.getElementById("ul").innerHTML = "<ul>" + li.join("") + "</ul>";
}
function addName(e) {
  var inputVale = document.getElementById("name").value;
  names.push(inputVale); //try to push input to names here...
  console.log(names);
  resetHTML();
  e.preventDefault();
}
resetHTML();

<div id="ul"></div>
<div>
  <form>
    <input type="text" id="name">
    <button id="btn">Add name</button>
  </form>
</div>

您还可以使用代理（仅ES6）来聆听数组中的更改。这样，只要更改数组，HTML就会自动更新。

var names = ["Lars", "Peter", "Jan", "Ian"];
document.getElementById("btn").onclick = addName;
names = new Proxy(names, {
  set: function(target, property, value, receiver) {
    target[property] = value;
    resetHTML();
    return true;
  }
});
function resetHTML() {
  var li = names.map(function(name) {
    return "<li>" + name + "</li>";
  });
  document.getElementById("ul").innerHTML = "<ul>" + li.join("") + "</ul>";
}
function addName(e) {
  var inputVale = document.getElementById("name").value;
  names.push(inputVale); //try to push input to names here...
  console.log(names);
  e.preventDefault();
}
resetHTML();

<div id="ul"></div>
<div>
  <form>
    <input type="text" id="name">
    <button id="btn">Add name</button>
  </form>
</div>

Answer 2

您的数组与您在屏幕上显示的元素没有绑定。目前，您只需在开始时循环一次循环，然后将数组内容添加到HTML中。

相反，您需要每次添加新名称时都更新HTML，以代表您的数组。您可以通过创建负责向HTML显示数组内容显示的函数来做到这一点。在这里，我称此功能updateHMTL，该功能接受数组。

请参见下面的工作示例：

var names = ["Lars", "Peter", "Jan", "Ian"];
document.getElementById("btn").onclick = addName;
function addName(e) {
  var inputVale = document.getElementById("name").value;
  names.push(inputVale); //try to push input to names here...
  updateHTML(names);
  e.preventDefault();
}
function updateHTML(names) {
  var li = names.map(function(names) {
    return "<li>" + names +"</li>";
  });
  document.getElementById("ul").innerHTML = "<ul>" + li.join("") + "</ul>";
}
updateHTML(names);

<div id="ul"></div>
<div>
  <form>
    <input type="text" id="name">
    <button id="btn">Add name</button>
  </form>
</div>

如果您希望可以使用ES6语法（并使用.reduce使您的updateHTML功能更优化）：

const names = ["Lars", "Peter", "Jan", "Ian"];
const updateHTML = names => {
  const ulli = "<ul>" + names.reduce((acc, n) => `${acc}<li>${n}</li>`, "") + "</ul>";
  document.getElementById("ul").innerHTML = ulli;
}
const addName = e => {
  const inputVale = document.getElementById("name").value;
  names.push(inputVale);
  updateHTML(names);
  e.preventDefault();
}
document.getElementById("btn").onclick = addName;
updateHTML(names);

<div id="ul"></div>
<div>
  <form>
    <input type="text" id="name">
    <button id="btn">Add name</button>
  </form>
</div>

Answer 3

您可以这样覆盖推动：

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

在JSFIDDLE上查看完整代码