如何從JavaScript中動態創建的html元素獲取輸入數據

Question

我有一個動態創建的字段集，該字段集具有一個表單和用於名稱，聯系方式等的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); } 

Answer 1

這是一個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);