Question

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

无法读取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。

QuerySelectorAll识别所有但不增加所有效果

1 个答案: