пытаясь стереть ввод после нажатия кнопки и понять, почему в консоли массив не обновляется - PullRequest
Новая
       6

пытаясь стереть ввод после нажатия кнопки и понять, почему в консоли массив не обновляется

0 голосов
/ 04 октября 2019

Я создал форму и при отправке с действительными данными он переходит в пустой массив, который я создал для сохранения пользовательских данных. Первая проблема - при отправке действительных данных я хочу снова стереть входы для добавления новых данных.

Вторая проблема - когда я иду на консоль, чтобы посмотреть, работает ли массив, перестает помещать новые данные, если я проверяю, чтоэто внутри. это нормально? Я хотел всегда обновлять массив большим количеством объектов.

Спасибо за продвинутый уровень 

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

Я ожидаю стереть ввод после отправки правильных правильных данных и актуализировать массив объектов с новымиинформация, представленная в форме

1 Ответ

2 голосов
/ 04 октября 2019

Вы устанавливаете значение элемента управления в переменную, а затем очищаете переменную - вы не очищаете значение элемента управления.

Вместо того, чтобы очищать переменную ... 

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