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

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

1 个答案: