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>

Tushar Gupta · Accepted Answer · 2022-03-20 02:00:38Z

3

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>

edited Mar 20, 2022 at 2:00

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

answered Mar 20, 2022 at 1:55

Usiel

7295 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

html_coder · Accepted Answer · 2022-03-20 01:56:07Z

0

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.

answered Mar 20, 2022 at 1:56

html_coder

4185 silver badges9 bronze badges

Comments

eugercek · Accepted Answer · 2022-03-20 01:56:15Z

0

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.

answered Mar 20, 2022 at 1:56

eugercek

1,0661 gold badge9 silver badges13 bronze badges

Comments

user17079768 · Accepted Answer · 2022-03-20 01:58:04Z

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>";
    }
  }
};

Collectives™ on Stack Overflow

How to render list items inside unordered list

4 Answers 4

Comments

Fixed code:

The little typo

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Fixed code:

The little typo

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related