CODEWITHSUNDEEP
javascriptarrays
J. Petersen
J. Petersen

Reputation: 59

push input to the array list and update content with the new one

It is so that when I write something in my input, do not update my array list with the new content that I have written in input.

I have tried to push into names but it will not add it to the array.

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>

Upvotes: 0

Views: 236

Answers (3)

nick zoum
nick zoum

Reputation: 7295

The problem here is that you are updating the array, but it is not binded to the HTML. To solve this issue you could either use a framework that will bind the HTML to the array (i.e. Angular, React), or you could just manually update the HTML after the button is clicked.

Here is an example:

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>

You could also use a Proxy (ES6 only) to listen for changes in the array. This way the HTML will automatically get updated whenever the array gets changed.

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>

Upvotes: 2

Arif
Arif

Reputation: 6478

You can override push like this:

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

Check complete code on JSFiddle https://jsfiddle.net/Arif2009/67Lm4u8b/22/

Upvotes: 0

Nick Parsons
Nick Parsons

Reputation: 50759

Your array isn't tied to the elements you display on your screen. At the moment you are simply looping through your array once at the beginning, and then adding your array contents to your HTML.

Instead, you need to update the HTML every time you add a new name such that it is representative of your array. You can do this by creating a function which is responsible for displaying the array content to your HTML. Here I call this function updateHMTL, which accepts an array.

See working example below:

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>

If you wish you can use ES6 syntax (and use .reduce to make your updateHTML function more optimized):

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>

Upvotes: 2

Related Questions