Javascript 用户完成进入杂货店后，内容消失

大家新年快乐！我通过学习jquery来庆祝。我在下面的代码中添加了一些jQuery，并设法添加了一些内容，并用它更改了一些css。getGroceries函数工作正常，正在做它应该做的事情。当用户输入完食品杂货后，程序（printGroceries）应该打印用户输入的列表。这一部分也在起作用。。。。但是，当这种情况发生时，程序会删除标题（我的购物清单）并删除所有样式

我做错了什么

编辑代码：删除完整代码并添加我更改的部分（对旧代码进行注释）

函数打印杂货（杂货项目）{
如果（杂货店项目长度>1）{
$（'screery-list'）.html（“”）；
//文件。填写（“”）；
对于（x=0；x”+groceryItems[x]+”）；
//文件。写（“
”+杂货店项目[x]+”
”）；
}
$（“#杂货清单”）。附加（“”）；
//文件。填写（“”）；
}否则{
$（“#杂货店清单”）。请预先填写（“对不起，您的清单是空的。
”）；
//文档。写（“对不起，您的列表是空的。
”）；
}
}

问题：

试试这个

function printGroceries(groceryItems) {
    if (groceryItems.length > 0) {
        $('#grocery-list').html('<ol class="items" id="list-items">');
        //document.write("<ol>");
        for(x=0; x < groceryItems.length;x++){
        groceryItems;
        $('#list-items').prepend('<li>' + groceryItems[x] + '</li>');
        //document.write("<li>" + groceryItems[x] + '</li>');
        }
        $('#grocery-list').append('</ol>');
        //document.write("</ol>");
    } else {
        $('#grocery-list').prepend('<p>Sorry, your list is empty.</p>');
        //document.write('<p>Sorry, your list is empty.</p>');
    }
}

函数打印杂货（杂货项目）{
如果（groceryItems.length>0）{
$（“#杂货店清单”）.html（“”）；
//文件。填写（“”）；
对于（x=0；x”+groceryItems[x]+”）；
//文件。写（“
”+杂货店项目[x]+”
”）；
}
$（“#杂货清单”）。附加（“”）；
//文件。填写（“”）；
}否则{
$（“#杂货店清单”）。请预先填写（“对不起，您的清单是空的。
”）；
//文档。写（“对不起，您的列表是空的。
”）；
}
}

正如我在评论中建议的那样，您错过了几件事
1.

if

条件应检查

groceryItems.length>0

2. <代码>$（'screery-list'）应为

$（'screery-list'）

，此处缺少id选择器

---

解决方案：

因为您使用的是jQuery；这是一个利用

$的版本。each（）

。此外，最好构建字符串并只追加一次，而不是反复追加每个项

function printGroceries(groceryItems) {
  var listItems = '';
  if (groceryItems.length > 0) {
    $.each(groceryItems, function (i, item) {
      listItems += '<li>' + item + '</li>';
    });
    $('#grocery-list').append('<ol class="items" id="list-items">'+listItems+'</ol>');
  } else {
    $('#grocery-list').prepend('<p>Sorry, your list is empty.</p>');
  }
}

函数打印杂货（杂货项目）{
var listItems=''；
如果（groceryItems.length>0）{
$。每个（食品杂货项目、功能（i、项目）{
listItems+='
'+item+'
'；
});
$（“#杂货清单”）。追加（“”+listItems+“”）；
}否则{
$（“#杂货店清单”）。请预先填写（“对不起，您的清单是空的。
”）；
}
}

您正在使用document.write，这将删除现有输出。为什么不使用jQuery的功能呢？@leetylor解决了这个问题。。。无法使用

文档。请在页面结束后写入
loaded@LeeTaylor他妈的！这就是我喜欢/讨厌代码的原因！哈哈，非常感谢你的指导。通过使用
.append（）
、
.prepend（）
和
.html（）
在标记之前/之后添加消息，以及在某些元素中完全更改html代码，我成功地输出了所有这些文档写入。你们太棒了！另外，感谢@charlietfl的确认，我非常感谢您的帮助！如果您的
条件似乎不正确，则应为
groceryItems.length>0
function printGroceries(groceryItems) {
  var listItems = '';
  if (groceryItems.length > 0) {
    $.each(groceryItems, function (i, item) {
      listItems += '<li>' + item + '</li>';
    });
    $('#grocery-list').append('<ol class="items" id="list-items">'+listItems+'</ol>');
  } else {
    $('#grocery-list').prepend('<p>Sorry, your list is empty.</p>');
  }
}