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
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;
Change this
document.getElementById('street').value = data.Street
to
data.Street = document.getElementById('street').value