如何使用javascript从动态创建的html元素中获取输入数据

我有一个动态创建的字段集，带有一个表单和6个姓名、联系人等输入。我希望使用以下方式从这些输入字段中获取数据：

document.getElementsByClassName("input-field")[0].id.value;

但无论我使用什么方法访问元素（ById、ByTagName等），我总是得到错误，无法得到undefined的值。当我有6个输入字段具有相同的类名时，为什么它是未定义的？我如何访问该值？谷歌搜索了很久，找不到任何有用的东西

编辑

这是我的密码

//获取body标记
var mainBody=document.getElementsByTagName（“主体”）；
//创建输入标签数组
var inputNameValues=[“名字”、“姓氏”、“头衔”、“健康数字”、“电子邮件”、“电话”]；
var inputLabels=[“名字”、“姓氏”、“头衔”、“卫生机构编号”、“电子邮件”、“电话（可选）”]；
//创建联系人表单
var contactPageDiv=document.createElement（“div”）；
contactPageDiv.setAttribute（“id”、“表单共容器”）；
var fieldSet=document.createElement（“fieldSet”）；
fieldSet.setAttribute（“id”、“联系人表单”）
var form=document.createElement（“表单”）；
setAttribute（“onsubmit”，validateForm（））；
字段集.appendChild（表单）；
//创建标签和输入字段
for（设i=0；i

这是一个X/Y问题

从

form.setAttribute（“onsubmit”，validateForm（））中删除（）

它在字段存在之前立即执行

也可以使用eventListener

form.addEventListener（“提交”，validateForm）

我推荐querySelector


函数验证表单（e）{
e、 preventDefault（）；//测试后删除
//获取第一个-使用querySelectorAll获取其余的
console.log（document.querySelector（“.input field”）.value）；
}
//获取身体标签
var mainBody=document.getElementsByTagName（“主体”）；
//创建输入标签数组
var inputNameValues=[“名字”、“姓氏”、“头衔”、“健康数字”、“电子邮件”、“电话”]；
var inputLabels=[“名字”、“姓氏”、“头衔”、“卫生机构编号”、“电子邮件”、“电话（可选）”]；
//创建联系人表单
var contactPageDiv=document.createElement（“div”）；
contactPageDiv.setAttribute（“id”、“表单共容器”）；
var fieldSet=document.createElement（“fieldSet”）；
fieldSet.setAttribute（“id”、“联系人表单”）
var form=document.createElement（“表单”）；
表格。附录列表（“提交”，验证表格）；
字段集.appendChild（表单）；
//创建标签和输入字段
for（设i=0；i