javascript - QuerySelectorAll 识别所有但不为所有添加效果

Question

我已经创建了简单的 html 表单，我想使用 javascript 为输入字段标签设置动画。我使用 querySellectorAll 方法来识别对象，并使用控制台记录 querySelectorAll(object).length 来检查值并正确记录。但效果仅适用于前 4 个输入字段 (.form__row) 。为什么会这样并且在控制台中显示错误

Cannot read property 'value' of null

const FloatLabel = (() => {

  // add active class
  const handleFocus = e => {
    const target = e.target;
    target.parentNode.classList.add('active');
  };

  // remove active class
  const handleBlur = e => {
    const target = e.target;
    if (!target.value.trim()) {
      target.parentNode.classList.remove('active');
      target.value = '';
    }
  };

  // register events
  const bindEvents = element => {
    const floatField = element.querySelector('.form__input');
    floatField.addEventListener('focus', handleFocus);
    floatField.addEventListener('blur', handleBlur);
  };

  // get DOM elements
  const init = () => {
    const floatContainers = document.querySelectorAll('.form__row');
    console.log(floatContainers);
    if (floatContainers.length) {
      floatContainers.forEach((element) => {
        if (element.querySelector('.form__input').value) {
          element.classList.add('active');
        }
        bindEvents(element);
      });
    };
  }

  return {
    init: init
  };
})();

FloatLabel.init();

<main class="signin">
  <form action="" class="form__signin">
    <section class="form__section">
      <span class="form__section-title">
                            Account information
                        </span>
      <div class="form__container">
        <div class="form__row">
          <label for="uname" class="form__label">User name</label>
          <input type="text" class="form__input" name="uname" id="uname" required/>
        </div>
        <div class="form__row">
          <label for="email" class="form__label">Email</label>
          <input type="email" class="form__input" name="email" id="email" required/>
        </div>
        <div class="form__row">
          <label for="password" class="form__label">Password</label>
          <input type="password" class="form__input" name="password" id="password" required/>
        </div>
        <div class="form__row">
          <label for="confirm" class="form__label">Confirm password</label>
          <input type="password" class="form__input" name="confirm" id="confirm" required/>
        </div>
      </div>
    </section>

    <section class="form__section">
      <span class="form__section-title">
                            Personal information
                        </span>
      <div class="form__container">
        <div class="form__row">
          <label for="mr" class="form__label-radio">Master</label>
          <input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
          <label for="ms" class="form__label-radio">Miss</label>
          <input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
        </div>
        <div class="form__row">
          <label for="fname" class="form__label">First name</label>
          <input type="text" class="form__input" name="fname" id="fname" required/>
        </div>
        <div class="form__row">
          <label for="lname" class="form__label">Last name</label>
          <input type="text" class="form__input" name="lname" id="lname" required/>
        </div>
        <div class="form__row">
          <label for="bdate" class="form__label-select-group">Date of birth</label>
          <select name="bdate" id="bdate" class="form__input-select"></select>
          <select name="bmonth" id="bmonth" class="form__input-select"></select>
          <select name="byear" id="byear" class="form__input-select"></select>
        </div>
        <div class="form__row">
          <label for="bdate" class="form__label">Country</label>
          <select name="country" id="country" class="form__input-select"></select>
        </div>
      </div>
    </section>

    <section class="form__section">
      <span class="form__section-title">
                            Contact information
                        </span>
      <div class="form__container">
        <div class="form__row">
          <label for="housenonstreet" class="form__label">House no and street no</label>
          <input type="text" class="form__input" name="housenonstreet" id="housenonstreet" required/>
        </div>
        <div class="form__row">
          <label for="city" class="form__label">City</label>
          <input type="text" class="form__input" name="city" id="city" required/>
        </div>
        <div class="form__row">
          <label for="postal" class="form__label">Postal Code</label>
          <input type="text" class="form__input" name="postal" id="postal" required/>
        </div>
        <div class="form__row">
          <select name="ccode" id="ccode" class="form__input-select"></select>
          <label for="" class="form__label">Mobile no</label>
          <input type="text" class="form__input">
        </div>
      </div>
    </section>

  </form>

</main>

Answer 1

您有一个 form__row，但其中没有 form__input。

        <div class="form__row">
          <label for="mr" class="form__label-radio">Master</label>
          <input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
          <label for="ms" class="form__label-radio">Miss</label>
          <input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
        </div>

因此，在尝试使用其值之前，您需要检查 element.querySelector(".form__input") 是否返回某些内容。

floatContainers.forEach((element) => {
  let input = element.querySelector('.form__input');
  if (!input) {
    return;
  }
  if (input.value) {
    element.classList.add('active');
  }
  bindEvents(element);
});

您应该在 bindEvents() 中进行类似的检查。或者您可以更改它，以便它接收输入作为参数，而不是 DIV。