用笔练习一些东西。这支笔以前工作过，但现在它说该项目（创建了 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
我做了什么？