CODEWITHSUNDEEP
javascripthtmlinnerhtml
agm
agm

Reputation: 91

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>

Upvotes: 0

Views: 935

Answers (4)

Usiel
Usiel

Reputation: 719

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>

Upvotes: 3

pallavdubey
pallavdubey

Reputation: 119

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

Upvotes: 0

Umut Ger&#231;ek
Umut Ger&#231;ek

Reputation: 1056

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.

Upvotes: 0

html_coder
html_coder

Reputation: 418

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.

Upvotes: 0

Related Questions