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>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>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.length; 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>There is only one little typo you made. In the for loop, you put legnth and it should be length.
You need to save your changes on DOM. Below creates new list element on each new entry and adds, "saves" on DOM.
inputBtn.addEventListener("click", () => {
myLeads.push(inputEl.value);
let newEl = document.createElement("li");
newEl.innerText = inputEl.value;
ulEl.appendChild(newEl);
});
Also never user innerHTML on things from you got directly from the user. It's dangerous.