时间戳

首页 > 解决方案 > 单击按钮后尝试擦除输入并理解为什么在控制台中数组未更新

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

问题描述

我制作了一个表单，当使用有效数据提交时，它会转到我创建的用于保存 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>

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

标签： javascriptevents

解决方案

您将控件的值设置为变量，然后将变量置空 - 您没有将控件的值置空。

而不是空白变量...

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

推荐阅读