Как получить входные данные из динамически созданного HTML-элемента с помощью JavaScript

Question

У меня есть динамически создаваемый набор полей с формой и 6 входами для имени, контакта и т. Д. Я хочу получить данные из этих полей ввода, используя что-то вроде:

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

, но независимо от того, какой метод доступаэлементы, которые я использую (ById, ByTagName и т. д.), я всегда получаю ошибку, не могу получить значение undefined.Почему он не определен, когда у меня есть 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);