为什么这个 function 停止使用除 getElementsByTagName 之外的其他“获取元素”方法？

Question

i'm trying to adapt this JS form steps for my own: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps

There is a function that validates it:

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }

But I want it to work only for specific field, so I added ID to the input and change the code to:

      y = x[currentTab].getElementById("test");

But then it stops to work and console shows that x[currentTab] is not a function. Please explain me, why this function works with y = x[currentTab].getElementsByTagName("input"); but stops if I change it for ID, class or name.

Answer 1

It's because getElementById returns a single element instead of a NodeList . Therefore, y[i] no-longer works. You can remove the whole loop part because there's only one.

function validateForm() {
  // This function deals with validation of the form fields
  let valid = true;
  const tabs = document.getElementsByClassName("tab"); // Do you need this?
  const input = document.getElementById("test");
  // A loop that checks every input field in the current tab:
  if (input.value == "") {
    // add an "invalid" class to the field:
    input.className += " invalid";
    // and set the current valid status to false
    valid = false;
  }

  // ...
}

It should be noted that an element's ID must be unique document-wide so selecting by ID within a specific parent element doesn't make much sense. If each tab has an element with an ID of test , the HTML is invalid. You can still select a single element by class name with something like tabs[currentTab].querySelector('.test'); instead.