javascript - 如何使用javascript从动态创建的html元素中获取输入数据
问题描述
我有一个动态创建的字段集,其中包含一个表单和 6 个用于姓名、联系人等的输入。我想使用以下内容从这些输入字段中获取数据:
document.getElementsByClassName("input-field")[0].id.value;
但无论我使用什么方法访问元素(ById、ByTagName 等),我总是得到错误无法获取未定义的值。为什么当我有 6 个具有相同类名的输入字段时它未定义,我如何访问该值?谷歌搜索了很长时间,找不到任何有用的东西。
编辑
这是我的代码
// get body tag
var mainBody = document.getElementsByTagName("body");
// create array of input labels
var inputNameValues = ["first-name", "last-name", "title", "health-num", "email", "telephone"];
var inputLabels = ["First Name", "Last Lame", "Title", "Health Authority Number", "Email", "Telephone (Optional)"];
// create the contact form
var contactPageDiv = document.createElement("div");
contactPageDiv.setAttribute("id", "form-cointainer");
var fieldSet = document.createElement("fieldset");
fieldSet.setAttribute("id", "contact-form")
var form = document.createElement("form");
form.setAttribute("onsubmit", validateForm());
fieldSet.appendChild(form);
// create labels and input fields
for (let i = 0; i < inputLabels.length; i++) {
var label = document.createElement("label");
var bold = document.createElement("b");
var inputText = document.createTextNode(inputLabels[i]);
bold.appendChild(inputText);
label.appendChild(bold);
form.appendChild(document.createElement("br"));
var input = document.createElement("input");
input.setAttribute("class", "input-field");
input.setAttribute("type", "text");
input.setAttribute("id", inputNameValues[i]);
// setup placeholder text, focus and required fields
input.setAttribute("placeholder", inputLabels[i]);
if (inputNameValues[i] === "first-name") {
input.setAttribute("autofocus", "true");
}
if (inputNameValues[i] !== "telephone") {
input.setAttribute("required", "true");
}
// add tool tip icon
if (inputNameValues[i] === "health-num") {
// create the img
var img = document.createElement("img");
img.setAttribute("id", "question-mark");
img.setAttribute("src", "resources/questionmark.jpg");
img.setAttribute("alt", "question mark symbol");
// create the tool tip text box
var textBox = document.createElement("div");
textBox.setAttribute("id", "tool-tip-text-box");
var paragraph = document.createElement("p");
textBox.appendChild(paragraph);
var text = document.createTextNode("If you do not know your ZHA number, please contact your GP");
paragraph.appendChild(text);
label.appendChild(textBox);
img.onmouseover = function() {
textBox.style.display = "block";
}
img.onmouseout = function() {
textBox.style.display = "none";
}
label.appendChild(img);
}
form.appendChild(label);
form.appendChild(input);
}
// create submit button
var submitBtn = document.createElement("input");
submitBtn.setAttribute("id", "submit-btn");
submitBtn.setAttribute("type", "submit");
submitBtn.setAttribute("value", "Submit!");
form.appendChild(submitBtn);
contactPageDiv.appendChild(fieldSet);
// display the form on the page
mainBody[0].appendChild(contactPageDiv);
function validateForm() {
console.log(document.getElementsByClassName("input-field")[0].value);
}
解决方案
这是一个 X/Y 问题
删除 () 从form.setAttribute("onsubmit", validateForm());
它在字段存在之前立即执行
也使用 eventListener
form.addEventListener("submit", validateForm);
我推荐 querySelector
function validateForm(e) {
e.preventDefault(); // remove when you have tested
// takes the first - use querySelectorAll to get the rest
console.log(document.querySelector(".input-field").value);
}
// get body tag
var mainBody = document.getElementsByTagName("body");
// create array of input labels
var inputNameValues = ["first-name", "last-name", "title", "health-num", "email", "telephone"];
var inputLabels = ["First Name", "Last Lame", "Title", "Health Authority Number", "Email", "Telephone (Optional)"];
// create the contact form
var contactPageDiv = document.createElement("div");
contactPageDiv.setAttribute("id", "form-cointainer");
var fieldSet = document.createElement("fieldset");
fieldSet.setAttribute("id", "contact-form")
var form = document.createElement("form");
form.addEventListener("submit", validateForm);
fieldSet.appendChild(form);
// create labels and input fields
for (let i = 0; i < inputLabels.length; i++) {
var label = document.createElement("label");
var bold = document.createElement("b");
var inputText = document.createTextNode(inputLabels[i]);
bold.appendChild(inputText);
label.appendChild(bold);
form.appendChild(document.createElement("br"));
var input = document.createElement("input");
input.setAttribute("class", "input-field");
input.setAttribute("type", "text");
input.setAttribute("id", inputNameValues[i]);
// setup placeholder text, focus and required fields
input.setAttribute("placeholder", inputLabels[i]);
if (inputNameValues[i] === "first-name") {
input.setAttribute("autofocus", "true");
}
if (inputNameValues[i] !== "telephone") {
input.setAttribute("required", "true");
}
// add tool tip icon
if (inputNameValues[i] === "health-num") {
// create the img
var img = document.createElement("img");
img.setAttribute("id", "question-mark");
img.setAttribute("src", "resources/questionmark.jpg");
img.setAttribute("alt", "question mark symbol");
// create the tool tip text box
var textBox = document.createElement("div");
textBox.setAttribute("id", "tool-tip-text-box");
var paragraph = document.createElement("p");
textBox.appendChild(paragraph);
var text = document.createTextNode("If you do not know your ZHA number, please contact your GP");
paragraph.appendChild(text);
label.appendChild(textBox);
img.onmouseover = function() {
textBox.style.display = "block";
}
img.onmouseout = function() {
textBox.style.display = "none";
}
label.appendChild(img);
}
form.appendChild(label);
form.appendChild(input);
}
// create submit button
var submitBtn = document.createElement("input");
submitBtn.setAttribute("id", "submit-btn");
submitBtn.setAttribute("type", "submit");
submitBtn.setAttribute("value", "Submit!");
form.appendChild(submitBtn);
contactPageDiv.appendChild(fieldSet);
// display the form on the page
mainBody[0].appendChild(contactPageDiv);
推荐阅读
- javascript - 如何使用内部键值对象打印 JSON 对象
- javascript - Javascript为什么preventdefault不避免使用回车键换行
- java - 如何获取 String 格式的 Map 对象并将其传递给 dataprovider
- webpack - Electron-webpack with Angular - 导入带有视图封装的样式
- c - 检查某些字符是否在 C 中的字符串中
- docker - Terraform destroy 在 docker 容器上不起作用
- reactjs - 尝试导入错误:“useHistory”未从“react-router-dom”导出
- angular - 表单提交和重置后向 FormArray 添加新的 FormGroup 有错误
- sql - 使用不同的 select 语句在存储过程中返回基于 switch case 的表
- asp.net - dotnet 核心开发符号链接