我创建了几个输入文本框，其中一个用于将项目添加到数组中。但是，我能够让项目显示在我声明以显示结果的 DOM 中，但这些项目没有添加到数组中。我创建了一个空数组来接受 HTML 页面上输入文本框中的值。请帮助我使用推送方法。
<body>
<script>
function groceries() {
let grocery = [];
const x = document.querySelector(".add").value;
let count = grocery;
grocery = x;
console.log(count);
console.log(grocery);
document.querySelector(".result").innerHTML = grocery;
return count;
}
</script>
<h1 class="result">RESULTS</h1>
<div class="center">
<label for="">Date Time</label><br>
<input type="datetime" name="" id=""><br>
<!--Code below is for search-->
<label for="search">Search</label><br>
<input class="search" type="search" name="search" placeholder="Search" id=""><br>
<!--//This line will add items to the grocery list, array.-->
<label for="grocery">Enter groceries</label><br>
<input class="add" type="text" name="" placeholder="Enter Groceries" id=""><br>
<!--This line removes item from the grocery list/ array.-->
<label for="grocery">Remove groceries</label><br>
<input class="remove" type="text" name="" placeholder="Remove Groceries" id=""><br><br>
<!-- Button to run the function above starting at line 13-->
<button type ="button" class="btn btn-lg btn-primary" onclick="groceries()" >Enter grocery</button>
这是因为每次调用函数时，数组都会重置为空。 将数组存储在 func 之外将阻止其重置。您还需要将项目推送到数组中。
let grocery = [];
function groceries() {
const x = document.querySelector(".add").value;
grocery.push(x)
document.querySelector(".result").innerHTML = grocery;
}