JS杂货店清单/项目为空

如何解决JS杂货店清单/项目为空

用笔练习一些东西。这支笔以前工作过，但现在它说该项目（创建了 let ）为空，因此它将不起作用。

// selecting the input
let item = document.getElementById(addlist);

// click events + running the function
document.getElementById("add").addEventListener('click',addItem);

document.addEventListener("keyup",() => {
  if (event.isComposing || event.keyCode === 13) {
    addItem();
  }
});

// creating grocery list and setting the innerHTML to it
let groceryList = [" Milk"," Eggs"," vegetables"," Ice tea"];
let displayList = groceryList.toString();
document.querySelector("#list").innerHTML = displayList;

// the actual function
function addItem() {

  let newItem = item.value;
  groceryList.push(newItem);
  let newList = groceryList.toString();
  document.querySelector("#list").innerHTML = newList;
  item.value = "";
}

@import url('https://fonts.googleapis.com/css2?family=Epilogue&display=swap');
body {
  font-family: 'Epilogue',sans-serif;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: #35644e;
  position: relative;
}

h1 {
  position: absolute;
  top: 0px;
  left: 10px;
  color: #e5e4e6;
  transition: transform 0.3s ease;
}

h1::after {
  content: " ?";
}

h1:hover {
  transform: translateX(5px);
}

button {
  font-family: inherit;
  font-size: 20px;
  color: #35644e;
  text-transform: uppercase;
  padding: 15px 20px 10px 20px;
  border: none;
  background-color: #12211a;
  border-radius: 5px;
  transition: transform 0.3s ease,Box-shadow 0.3s ease;
  margin-bottom: 20px;
}

button:hover {
  transform: translateY(-3px);
  Box-shadow: 0px 5px 0px rgb(102,255,51);
}

button:active {
  transform: translateY(0px);
  Box-shadow: none;
}

button:focus {
  outline: none;
}

input {
  font-family: inherit;
  font-size: 14px;
  width: 200px;
  padding: 20px;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
}

input:focus {
  outline: none;
}

#list {
  font-size: 16px;
  color: white;
}

<body>
  <div class="wrapper">
    <h1>Grocery List</div>
  <input type="text" id="addlist" placeholder="Type product here..">
  <button id="add">Add</button>
  <div id="list"></div>
  </div>
</body>

这里是pen

我做了什么？

解决方法

您需要像这样在选择器中添加引号：

let item = document.getElementById('addlist');