How to render list items inside unordered list

March 20, 2022

My goal is to render the strings in the array based on it’s length, but it’s not rendering anything below the button. Can you help me find what is happening?

let myLeads = ["stackoverflow.io", "you.com"]
let myLeads = ["stackoverflow.io", "you.com"]
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")

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

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

<body>
  <input type="text" id="input-el">
  <button id="input-btn">Save Company</button>
  <ul id="ul-el"></ul>
  <script src="index.js"></script>
</body>

>Solution :

You misspelled length in the for loop that’s why it doesn’t work.

let myLeads = ["stackoverflow.io", "you.com"]
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")

inputBtn.addEventListener("click", () => {
    myLeads.push(inputEl.value)
    //Render()
    Data(inputEl.value)
    console.log(myLeads)
})

function Data(value){
 ulEl.innerHTML += "<li>" + value + "</li>"
}

function Render(){

for (let i = 0; i < myLeads.length; i++) {
    Data(myLeads[i])
}

}

 Render()

<body>
     <input type="text" id="input-el">
     <button id="input-btn">Save Company</button>
     <ul id="ul-el">
     </ul>
     <script src="index.js"></script>
</body>