My array (myLeads) elements are not rendered in HTML list but they are showing correctly in console.-CodePudding

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

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

let arr = [2, 3, "fadf"]

/*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>save leads</title>
    <link rel="stylesheet" href="/index.css">
</head>
<body>
    <input type="text" id="input-el">
    <button id="input-btn">Save tabs</button>
    <ul id="ul-el"></ul>
    <script src="/index.js"></script>
</body>
</html>

CodePudding user response：

Put the loop in a function and call it. Also make sure to reset the ul to be empty

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

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

let arr = [2, 3, "fadf"]

/*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/
function updateList(){
    ulEl.innerHTML = "";
    for(let i = 0; i < myLeads.length; i  ){
        ulEl.innerHTML  = "<li>"   myLeads[i]   "</li>"
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>save leads</title>
    <link rel="stylesheet" href="/index.css">
</head>
<body>
    <input type="text" id="input-el">
    <button id="input-btn">Save tabs</button>
    <ul id="ul-el"></ul>
    <script src="/index.js"></script>
</body>
</html>

CodePudding user response：

You are not updating the HTML element anywhere when the click event is being fired. That means your list is only populated by the initial elements of myLeads when the page is refreshed and then never again.

Move the cycle for generating li elements into a function, for example

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

and then call it inside the event handler

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