试图在单击按钮后擦除输入，并了解为什么在控制台中阵列未更新

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 = '';