Input Form OnChange Function Not Displaying Data?

Question

So I made this codepen here https://codepen.io/shodoro/pen/xxYqXqv?editors=1111

I am trying to get whatever I type into my input form to display in my console, but everytime I type something it just shows " "

Right now I understand that I set my data to be " ", but I don't know how to make what I type to display

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

Here's the javascript

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

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

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

Note eventually I will want to integrate this with a backend API, so whatever I type will update into the API data, but for now I just want to confirm my inputs work first

Answer 1

You are not getting the data you are typing as you are not looking for it. Forms are submitted on button clicks unless the type of the form button is specifically not submit type. You need to prevent your form from submitting using the preventDefault method.

Add to that, you are assigning the empty field of the Data object into the input field's value. I think what you are trying to achieve is

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

Answer 2

Change this

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

to

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