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>CodePudding user response：
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>CodePudding user response：
Fixed code:
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>The little typo
There is only one little typo you made. In the for loop, you put legnth and it should be length.
CodePudding user response：
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.
CodePudding user response：
First thing, you have a typo in your for loop myLeads.length.
I would suggest to create a function for updating ul element and call it in the click event for the button.
window.onload = function () {
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);
updateUl();
console.log(myLeads);
});
function updateUl() {
ulEl.innerHTML = "";
for (let i = 0; i < myLeads.length; i ) {
ulEl.innerHTML = "<li>" myLeads[i] "</li>";
}
}
};