将对象推送到Javascript中的空数组不起作用

正在尝试用Javascript创建书签应用程序。我创建了一个书签对象和一个空数组“bookmarks”来存储网站名称和网站url。 但是，单击submit不会填充书签数组。它用输入表单中的新值替换初始值

document.getElementById（'subButton'）。addEventListener（'click'，getFormInput）
函数getFormInput（e）{
e、 预防默认值（）；
//获取输入值
var nameInput=document.getElementById（'name'）。值；
var urlInput=document.getElementById（'url'）。值；
//创建书签对象
变量书签={
name:nameInput，
url:urlInput
}
//将书签存储在书签数组中
var书签=[]；
书签。按（书签）；
console.log（书签）
}

正文{
背景：#EFEFEF
}
.内容{
保证金：自动；
利润上限：70像素；
宽度：600px；
文本对齐：居中；
框大小：边框框；
滤镜：投影（0px 3px 6px rgba（0,0,0,0.161））；
填充：rgba（255255,1）；
背景：#fff；
填充顶部：30px；
填充底部：30px；
}
输入{
边界半径：3px；
}
输入[type=“text”]{
颜色：红色；
边缘顶部：10px；
填充：10px；
显示：块；
边界：无；
滤镜：投影（0px 3px 6px rgba（0,0,0,0.161））；
填充：rgba（255255,1）；
背景：#fff；
宽度：50%；
保证金：自动；
}
#子按钮{
宽度：30%；
填充：10px；
保证金：自动；
边缘顶部：30px；
文本对齐：居中；
边界：无；
}
蓝先生{
背景色：#3D78FF；
颜色：#fff；
}

网站书签
姓名：


网址：
提交

书签数组的作用域是函数，因此每次都会重置它

在getFormInput函数外部声明它

document.getElementById('subButton').addEventListener('click',getFormInput)

var bookmarks = [];

function getFormInput(e){

    e.preventDefault();
    //get input values
    var nameInput = document.getElementById('name').value;
    var urlInput = document.getElementById('url').value;


//create a bookmark object
var bookmark = {
    name: nameInput,
    url: urlInput
}
// store bookmark in bookmarks array
bookmarks.push(bookmark);
console.log(bookmarks)
}

---

每次调用函数时，需要将

var bookmarks=[]

移出函数，在函数内部重新初始化

var bookmarks=[]；
document.getElementById（'subButton'）。addEventListener（'click'，getFormInput）
函数getFormInput（e）{
e、 预防默认值（）；
//获取输入值
var nameInput=document.getElementById（'name'）。值；
var urlInput=document.getElementById（'url'）。值；
//创建书签对象
变量书签={
name:nameInput，
url:urlInput
}
//将书签存储在书签数组中
书签。按（书签）；
console.log（书签）
}

正文{
背景：#EFEFEF
}
.内容{
保证金：自动；
利润上限：70像素；
宽度：600px；
文本对齐：居中；
框大小：边框框；
滤镜：投影（0px 3px 6px rgba（0,0,0,0.161））；
填充：rgba（255255,1）；
背景：#fff；
填充顶部：30px；
填充底部：30px；
}
输入{
边界半径：3px；
}
输入[type=“text”]{
颜色：红色；
边缘顶部：10px；
填充：10px；
显示：块；
边界：无；
滤镜：投影（0px 3px 6px rgba（0,0,0,0.161））；
填充：rgba（255255,1）；
背景：#fff；
宽度：50%；
保证金：自动；
}
#子按钮{
宽度：30%；
填充：10px；
保证金：自动；
边缘顶部：30px；
文本对齐：居中；
边界：无；
}
蓝先生{
背景色：#3D78FF；
颜色：#fff；
}

网站书签
姓名：


网址：
提交

您之所以会遇到这个问题，是因为您在何处声明了

var bookmarks=[]
将其移到函数范围之外，以便在调用函数时不会重新初始化

document.getElementById('subButton').addEventListener('click',getFormInput)
var bookmarks = [];
function getFormInput(e){

    e.preventDefault();
    //get input values
    var nameInput = document.getElementById('name').value;
    var urlInput = document.getElementById('url').value;


//create a bookmark object
var bookmark = {
    name: nameInput,
    url: urlInput
}
// store bookmark in bookmarks array

bookmarks.push(bookmark);
console.log(bookmarks)
}

点击提交按钮的位置在哪里？谢谢。我试图避免声明一个不相关的全局变量，所以我有点失控了