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>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
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.