单击按钮后尝试擦除输入并了解为什么在控制台中数组未更新

Question

>我制作了一个表单，当提交有效数据时，它会转到我创建的空数组以保存userData。 第一个问题 - 提交有效数据时，我想再次擦除输入以添加新数据。

第二个问题 - 当我去控制台查看它是否有效时，如果我检查里面有什么，数组就会停止放置新数据。这是正常的吗？我想总是用更多的对象升级数组。

提前谢谢你

<form action="#" method="POST" id="add-form">
<label for="txtUser">User Name</label>
<input type="text" id="txtUser" name="firstName" placeholder="name">
<label for="txtPass">Password</label>
<input type="password" id="txtPass" name="yourPassword" placeholder="password">
<button id="submit">Enter</button>
</form>

<script>
(function(){
'use strict'
const form =document.querySelector('#add-form')
const user = document.querySelector('#txtUser')
const pass = document.querySelector('#txtPass')
const submit = document.querySelector('#submit')
const saveData = []

form.addEventListener('submit',function(e){
e.preventDefault()
if(e.target.elements.firstName.value === '' || 
e.target.elements.yourPassword.value === ''){
alert('enter some valid text')
}else{
let nameData = e.target.elements.firstName.value
let passData = e.target.elements.yourPassword.value
saveData.push({
userName: nameData,
userPass: passData
})
//problem: doesn't erase the input after entering the button 
nameData = ''
passData = ''
}
})
console.log(saveData)
})()

</script>

我希望在提交正确的有效数据后擦除输入，并使用表单上提交的新信息实现对象数组

Answer 1

将控件的值设置为变量，然后清空变量 - 不是清空控件的值。

而不是空白变量...

nameData = ''
passData = ''

清空控件...

e.target.elements.firstName.value = '';
e.target.elements.yourPassword.value = '';

---

另一种方法是存储控件并直接使用它......

let nameCtrl = e.target.elements.firstName;
let passCtrl = e.target.elements.yourPassword;
saveData.push({
userName: nameCtrl.value,
userPass: passCtrl.value
})
nameCtrl.value = ''
passCtrl.value = ''