How to render list items inside unordered list

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. Also, I've refactored it a bit, nothing more.

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>