Почему мой список покупок в массиве содержит "undefined"?

Question

Здравствуйте уважаемые разработчики,

Предполагается, что каждое значение моего массива имеет свой собственный маркер в списке html - что они и делают. Но есть «неопределенный», прежде чем фактический список начинается. Интересно, откуда это. Что не так с моим кодом?

Спасибо за вашу помощь!

HTML:

Shopping List
<ul id="list"></ul>

JS:

function letsShop(){
var array = ["milk", "cheese", "eggs"];
for (var i = 0; i < array.length; i++){

var stuff = stuff + "<li>" + array[i] + "</li>";

document.getElementById("list").innerHTML=stuff;
}}

window.addEventListener("load", letsShop);

Answer 1

Поскольку ваша переменная stuff объявлена ​​внутри цикла, который еще не инициализирован, это означает возвращение undefined. Обновите ваш код следующим образом:

function letsShop(){
  var array = ["milk", "cheese", "eggs"];
  var stuff = "";
  for (var i = 0; i < array.length; i++){
    stuff +="<li>" + array[i] + "</li>";
    document.getElementById("list").innerHTML=stuff;
  }
}

letsShop();

Answer 2

stuff равно undefined до запуска цикла for. Кроме того, вы перезаписываете содержимое списка в цикле с каждой итерацией.

Правильный подход для этого:

function letsShop() {
  // Declare the variable outside the loop
  var stuff = '';
  var array = ["milk", "cheese", "eggs"];

  for (var i = 0; i < array.length; i++) {
    stuff = stuff + "<li>" + array[i] + "</li>";
  }
  // Set the contents in list after the loop
  document.getElementById("list").innerHTML = stuff;
}

letsShop();

Shopping List
<ul id="list"></ul>