Trouble iterating over HTML elements created by Javascript function-CodePudding

I am currently working on simple event listeners. I created a page that takes input from a text box, as it is typed, and appends new LIs to an empty UL.

const form = document.querySelector('#firstForm');
const data = document.querySelector('#info');
const list = document.querySelector('#list');
const para = document.querySelector('#live');
const entries = document.querySelectorAll('li');

form.addEventListener("input", function (e) {
    e.preventDefault();
    console.log("======");
    console.log(`${data.value}`);
    const input = data.value;
    const newLI = document.createElement('LI');
    newLI.innerText = input;
    para.innerText = input;
    list.append(newLI);
    console.log("======");
    // form.reset();
    const listArr = Array.from(entries)
});

<h1>My form with live update</h1>
    <p id="live"></p>
    <form action="/fourohfour" id="firstForm">
        <input type="text" id="info">
    </form>
    <h2>Submitted Data</h2>
    <ul id="list">
    </ul>

My problem is thus: I was trying to create a new feature that would involve iterating over all the newly created LIs. But, when I go to fetch the nodeList document.quereySelectorAll('LI') returns to me, its empty. empty nodeList pic

Here is a link to a live GitHub Sites, if console access is needed => OperationNorthwoods.github.io

CodePudding user response：

Here is a working example of my comment as an answer.

const form = document.querySelector('#firstForm');
const data = document.querySelector('#info');
const list = document.querySelector('#list');
const para = document.querySelector('#live');


form.addEventListener("input", function (e) {
    e.preventDefault();
    console.log("======");
    console.log(`${data.value}`);
    const input = data.value;
    const newLI = document.createElement('LI');
    newLI.innerText = input;
    para.innerText = input;
    list.append(newLI);
    console.log("======");
    // form.reset();
    const entries = document.querySelectorAll('li');
    const listArr = Array.from(entries)
    console.log(listArr)
});

<h1>My form with live update</h1>
    <p id="live"></p>
    <form action="/fourohfour" id="firstForm">
        <input type="text" id="info">
    </form>
    <h2>Submitted Data</h2>
    <ul id="list">
    </ul>

CodePudding user response：

you just need to update entries array on every new list created or deleted. But according to @previous ans by ivan you need to fetch evry time list by document.querySelectorAll('li') which is not optimised so on evry input add or delete and you have a redy to go entries array when ever you need

const form = document.querySelector('#firstForm');
const data = document.querySelector('#info');
const list = document.querySelector('#list');
const para = document.querySelector('#live');
const entries = [...document.querySelectorAll('li')];

form.addEventListener("input", function (e) {
    e.preventDefault();
    console.log("======");
    console.log(`${data.value}`);
    const input = data.value;
    const newLI = document.createElement('LI');
    newLI.innerText = input;
    para.innerText = input;
    list.append(newLI);
    console.log("======");
    // form.reset();
  //new code piece
  entries.push(newLI)
    const listArr = Array.from(entries)
  console.log(entries)
  
});


function buttonPress (){
  console.log("buttonPressFunctionStart")
  console.log(entries)
  entries.forEach((el)=>{
    el.style.color = "#fff"
  })
  console.log("buttonPressFunctionEnd")
  
}

<h1>My form with live update</h1>
    <p id="live"></p>
    <form action="/fourohfour" id="firstForm">
        <input type="text" id="info">
    </form>
    <h2>Submitted Data</h2>
    <ul id="list">
    </ul>


<button onclick="buttonPress()"> check lists operation </button>