Why isn't my list updated when I add new items to the array?

Question

I'm stuck. Trying to push input values into an array, which actually works, but then I want to get them out into an unordered list, and they don't show up. What am I doing wrong?

const inputBtn = document.querySelector("#input-btn");
let myLeads = [];
const inputEl = document.querySelector("#input-el");
const ulEl = document.querySelector("#ul-el");

inputBtn.addEventListener("click", function() {
  myLeads.push(inputEl.value);
  console.log(myLeads);
});

for (let i = 0; i < myLeads.length; i++) {
  ulEl.innerHTML += "<li>" + myLeads[i] + "</li>";
}

<input type="text" id="input-el" />
<button id="input-btn">SAVE INPUT</button>
<ul id="ul-el"></ul>

The DOM isn't automatically updated when your array changes. You'd need to call a function that contains your `for` loop code. Do that after pushing to the array. — isherwood, Nov 30 '21 at 19:59
You probably also want to check that it has a value before pushing and clear it after. — isherwood, Nov 30 '21 at 20:02
You could just append the value instead of rewriting them all, too. This would allow for some nice animation. — isherwood, Nov 30 '21 at 20:10

Andy · Accepted Answer · 2021-11-30T20:11:59.050

2

Your loop doesn't do much because it's executing before any clicks.

Remove the dependence on the array, and use insertAdjacentHTML to add the wrapped value of the input directly to the list within the click handler.

(Note: I'm using insertAdjacentHTML here because there are performance issues that arise from concatenating HTML to an element's innerHTML property.)

const inputBtn = document.querySelector('#input-btn');
const inputEl = document.querySelector('#input-el');
const ulEl = document.querySelector('#ul-el');

inputBtn.addEventListener('click', function() {
  ulEl.insertAdjacentHTML('beforeend', `<li>${inputEl.value}</li>`);
});

<input type="text" id="input-el" />
<button id="input-btn">SAVE INPUT</button>
<ul id="ul-el"></ul>

Additional documentation

Template/string literals

edited Nov 30 '21 at 20:11

answered Nov 30 '21 at 20:03

Andy

61,948
13
68
95

So the loop doesn't work all the time? It must be initiated by a function or a click event? Am I right? Sorry, if this question sound silly but I'm just a beginner. – TomDev Nov 30 '21 at 20:11
1

The order of execution in your code is 1) cache the elements 2) assign a handler to the click listener (which doesn't do anything until you click something), 3) immediately loop over an array that currently doesn't have any elements in it. You could push to the array in the handler, and then run the loop, but that seems a little superfluous when you can just add the wrapped value to the list in the handler. No questions are silly. Well, some of them are, but we all started somewhere. And the fact that you attempted something is a good thing. – Andy Nov 30 '21 at 20:16
1

Thanks Andy for all the explanations. Now I need to process it :) Hope to reach your level one day. – TomDev Nov 30 '21 at 20:19
Haha, I just got a new job today and realised I'm still out of my depth after 20+ years. There's still always a lot to learn even at my age. My advice to new developers is to keep a link to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript) handy for reference, and to keep an open mind about blog posts about as they can often be very opinionated, and often not useful, But good luck with the coding! @TomDev – Andy Nov 30 '21 at 20:30

score 0 · Answer 2 · answered Nov 30 '21 at 20:03

One option would be to immediately call your for loop right after pushing to the array. Like so:

inputBtn.addEventListener("click", function() {
  myLeads.push(inputEl.value);
  for (let i = 0; i < myLeads.length; i++) {
     ulEl.innerHTML += "<li>" + myLeads[i] + "</li>";
  }
  console.log(myLeads);
});

Right now, the for loop isn't run at all.

Why isn't my list updated when I add new items to the array?

2 Answers2