Форма ввода OnChange Функция не отображает данные?

Так что я сделал этот codepen здесь https://codepen.io/shodoro/pen/xxYqXqv?editors=1111

Я пытаюсь получить все, что я ввожу в свою форму ввода, для отображения в моей консоли, но каждый раз, когда я что-то набираю, он просто показывает " "

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

вот html

      <form>
            <input type = "text" placeholder = "Street" id = "street" onchange = "updateInfo()">
          <input type = "text" placeholder = "City" id = "city" onchange = "updateInfo()">
          <input type = "text" placeholder = "Zipcode" id = "zipcode" onchange = "updateInfo()">
      </form>

вот джаваскрипт

      function updateInfo() {
          const url = ""
          const data = {
              Street: '',
              City: '',
              Zipcode: '',
          }

          document.getElementById('street').value = data.Street

          console.info('hi', data.Street)
      }

Обратите внимание, что в конечном итоге я захочу интегрировать это с внутренним API, поэтому все, что я ввожу, будет обновляться в данных API, но сейчас я просто хочу сначала подтвердить, что мои входные данные работают.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
15
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы не получаете данные, которые вводите, поскольку не ищете их. Формы отправляются при нажатии кнопки, если только тип кнопки формы не является типом submit. Вам нужно запретить отправку формы с помощью метода preventDefault.

Добавьте к этому, что вы назначаете пустое поле объекта Data значению поля ввода. Я думаю, что вы пытаетесь достичь

data.Street = document.getElementById('street').value;

почему изменение порядка заставило его работать?

makerbaker 17.05.2022 20:44

Это не меняет порядок. Это простой оператор присваивания. Вы присваиваете значение справа переменной слева.

kanuos 17.05.2022 20:45

Пример: пусть k = 77; Вы присваиваете 77 переменной k, а не наоборот

kanuos 17.05.2022 20:45

ах, так я бы поместил свою функцию updateInfo() в форму отправки, чтобы она отображала мои данные только после того, как я заполнил все другие поля ввода? потому что прямо сейчас, если я нажму на свой следующий ввод, он сразу же зарегистрирует данные

makerbaker 17.05.2022 20:48

В настоящее время ваш код получает значения всех полей ввода по отдельности. На самом деле, вы просто используете input#street. Я бы рекомендовал вам следовать этой последовательности: 1. удалить все идентификаторы из полей ввода 2. добавить идентификатор в форму, чтобы обнаружить форму из DOM 3. использовать событие отправки формы, чтобы предотвратить поведение отправки по умолчанию 4. использовать FormData конструктор получает данные формы, а затем выполняет остальную часть кода. Посмотрите документы MDN для FormData и как их использовать.

kanuos 17.05.2022 20:51

моя конечная цель - отправить все данные формы на серверный API, где они будут храниться, поэтому с вашим методом это будет правильным способом? потому что я видел, что код был похож на <form action = "url of api" method = "post">...

makerbaker 17.05.2022 20:53

Приведенный выше код напрямую взаимодействует с серверной частью. Атрибут действия отправляет данные формы в конечную точку внутреннего API с помощью метода post. Это старый способ, и он отлично работает. Однако, если вы используете интерфейсную структуру, такую ​​как react, vue, angular и т. д., вы хотите предотвратить отправку формы, чтобы вы могли проверить данные формы на стороне клиента, а затем отправить проверенные данные на серверную часть с помощью вызовов AJAX ( например: получить API)

kanuos 17.05.2022 20:56

Изменить это

document.getElementById('street').value = data.Street

к

   data.Street = document.getElementById('street').value

Другие вопросы по теме