Javascript 尝试将名称添加到列表并发送到HTML

我正在用脚本制作一个简单的网页。有一个表单，您可以在其中输入名称，然后提交表单。提交后，脚本应读取值，将名称推送到数组中，并将字符串添加到其正下方的HTML段落中。每次提交新名称时，数组和显示的段落都会变长。但是，当我按submit时，新名称会在HTML段落上闪烁片刻，然后页面会重置为开始设置。我的代码有什么问题

输入名称（无重复项）：





当前列表：
空

var guestNames=[]；
var guestList=“当前列表：
”；
函数appendName（）{
var latestGuest=document.getElementById（“guestName”）.value；
guestNames=guestNames.push（最晚的客人）；
来宾列表=来宾列表+最新来宾+“
”；
document.getElementById（“来宾名单”）.innerHTML=guestList；
}

您只需添加

事件.preventDefault（）

到onSubmit函数

另外，当您要推送到一个数组时，只需使用

guestNames.push（latestGuest）无需使用
guestNames=guestNames.push（latestGuest）

工作代码段：



输入名称（无重复项）：





当前列表：
空

var guestNames=[]；
var guestList=“当前列表：
”；
函数appendName（）{
event.preventDefault（）；
var latestGuest=document.getElementById（“guestName”）.value；
客人姓名推送（最晚的客人）；
来宾列表=来宾列表+最新来宾+“
”；
document.getElementById（“来宾名单”）.innerHTML=guestList；
}
您只需添加
事件.preventDefault（）
到onSubmit函数

另外，当您要推送到一个数组时，只需使用
guestNames.push（latestGuest）无需使用
guestNames=guestNames.push（latestGuest）

工作代码段：



输入名称（无重复项）：





当前列表：
空

var guestNames=[]；
var guestList=“当前列表：
”；
函数appendName（）{
event.preventDefault（）；
var latestGuest=document.getElementById（“guestName”）.value；
客人姓名推送（最晚的客人）；
来宾列表=来宾列表+最新来宾+“
”；
document.getElementById（“来宾名单”）.innerHTML=guestList；
}
正如@cb64所说，您必须传递
事件
并调用
event.preventDefault（）
。
不过，这里有一些建议


更喜欢使用
let/const
而不是使用
var
全局声明变量
单击按钮后，通过将其值设置为
''
，擦除该字段
不要将数组设置为返回
array.push（）
，只需调用
push
，这是一个变异操作，数组将被更新
只需使用

加入数组，而不是将名称追加到字符串中
用
将
空的
包装在HTML中，并设置此元素的
innerHTML
，而不是设置整个段落，这样您就不必重写
当前列表：




输入名称（无重复项）：





当前列表：
为空

const guestNames=[]；
函数名（事件）{
event.preventDefault（）；
const guestName=document.getElementById（'guestName'）；
const latestGuest=guestName.value；
guestName.value=''；
客人姓名推送（最晚的客人）；
document.getElementById（'guest_花名册'）。innerHTML=guestNames.join（“
”）；
}
正如@cb64所说，您必须传递
事件
并调用
event.preventDefault（）
。
不过，这里有一些建议


更喜欢使用
let/const
而不是使用
var
全局声明变量
单击按钮后，通过将其值设置为
''
，擦除该字段
不要将数组设置为返回
array.push（）
，只需调用
push
，这是一个变异操作，数组将被更新
只需使用

加入数组，而不是将名称追加到字符串中
用
将
空的
包装在HTML中，并设置此元素的
innerHTML
，而不是设置整个段落，这样您就不必重写
当前列表：




输入名称（无重复项）：





当前列表：
为空

const guestNames=[]；
函数名（事件）{
event.preventDefault（）；
const guestName=document.getElementById（'guestName'）；
const latestGuest=guestName.value；
guestName.value=''；
客人姓名推送（最晚的客人）；
document.getElementById（'guest_花名册'）。innerHTML=guestNames.join（“
”）；
}
效果很好，谢谢。究竟什么是“event.preventDefault（）；”阻止？我添加了“JavaScript:void（0）”以防止页面刷新，但这似乎不是有效的或必要的。我不100%确定原因，但我知道这是因为您正在设置
href=“JavaScript:void（0）”
如果要阻止表单提交，请使用
action=“JavaScript:void（0）”
。不过，我会避免使用
“JavaScript:void（0）”
。event.preventDefault实际上停止了事件传播。