How to render list items inside unordered list
Question
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>
4 answers
solution1
3 ACCPTED 2022-03-20 01:55:01
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>
solution2
0 2022-03-20 01:56:07
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 .
solution3
0 2022-03-20 01:56:15
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.
solution4
0 2022-03-20 01:58:04
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>";
}
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.