Форма ввода 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, но сейчас я просто хочу сначала подтвердить, что мои входные данные работают.

🤔 А знаете ли вы, что...
JavaScript поддерживает асинхронное программирование с использованием промисов и асинхронных функций.


15
2

Ответы:

Решено

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

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

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

Изменить это

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

к

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