输入表单 OnChange 函数不显示数据？

Question

所以我在这里做了这个codepenhttps://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>

这是javascript

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

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

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

请注意，最终我想将其与后端 API 集成，因此无论我输入什么都会更新到 API 数据中，但现在我只想先确认我的输入有效

Answer 1

您没有得到正在输入的数据，因为您没有在寻找它。除非表单按钮的类型明确不是 submit 类型，否则将在单击按钮时提交表单。您需要阻止使用 preventDefault 方法提交表单。

除此之外，您正在将 Data 对象的空字段分配给输入字段的值。我认为你想要实现的是

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

Answer 2

改变这个

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

至

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

输入表单 OnChange 函数不显示数据？

Input Form OnChange Function Not Displaying Data?

html

javascript

forms

api

input