input.addEventListener不是函数＆

Question

首先，我有这段代码

var input = document.querySelector("fieldset > input");
var label = document.querySelector("fieldset > label");

input.addEventListener("focus", function(event) {
  if (label.classList.contains("label-blur")) {
    label.classList.remove("label-blur");
    label.classList.add("label-focus");
  } else {
    label.classList.add("label-focus");
  }
});

input.addEventListener("blur", function(event) {
  if (!input.value) {
    label.classList.remove("label-focus");
  } else {
    label.classList.add("label-blur");
  }
});

它可以正常工作。

然后，我在“ querySelectorAll”上更改了“ querySelector”。 我发现以下信息，即addEventListener不适用于querySelectorAll（ JS错误对象没有方法addEventListener ）。 所以解决方法是这样的：

var input = document.querySelectorAll("fieldset > input");
var label = document.querySelectorAll("fieldset > label");


for(var i=0; i < input.length; i++) {
  input[i].addEventListener("focus", function(event) {
    if (label.classList.contains("label-blur")) {
      label.classList.remove("label-blur");
      label.classList.add("label-focus");
    } else {
      label.classList.add("label-focus");
    }
  });

  input[i].addEventListener("blur", function(event) {
    if (!input.value) {
      label.classList.remove("label-focus");
    } else {
      label.classList.add("label-blur");
    }
  });
};

但是这样我有新的错误：

• 未捕获的TypeError：无法读取未定义的属性“包含”
• 未捕获的TypeError：无法读取未定义的属性“删除”

请让我知道如何解决此问题。

我尝试过这种方式（由Conor Hastings推荐）：

    for(var i=0; i < input.length; i++) {
      input[i].addEventListener("focus", function(event) {
        for(var j=0; j < label.length; j++) {
          if (label[j].classList.contains("label-blur")) {
            label[j].classList.remove("label-blur");
            label[j].classList.add("label-focus");
          } else {
            label[j].classList.add("label-focus");
          }
        };
      });

      input[i].addEventListener("blur", function(event) {
        for(var j=0; j < label.length; j++) {
          if (!input.value) {
            label[j].classList.remove("label-focus");
          } else {
            label[j].classList.add("label-blur");
          }
        };
      });
    };

它工作得更好，但是每个“ addEventListener”都工作不正确。 现在，仅“标签焦点”起作用。 它适用于每个i（如果有输入：focus，则显示每个标签）。

并且用'let j = i'代替'for（var j = 0; j <label.length; j ++）'不会执行任何操作。

Answer 1

在for循环中通过i访问输入的方式与对标签执行的操作相同，以便使标签与标签NodeList中的输入位于同一索引中

您还必须在input [i]事件监听器中执行相同的操作

for(var i=0; i < input.length; i++) {
  input[i].addEventListener("focus", function(event) {
    if (label[i].classList.contains("label-blur")) {
      label[i].classList.remove("label-blur");
      label[i].classList.add("label-focus");
    } else {
      label[i].classList.add("label-focus");
    }
  });

  input[i].addEventListener("blur", function(event) {
    if (!input[i].value) {
      label[i].classList.remove("label-focus");
    } else {
      label[i].classList.add("label-blur");
    }
  });
};

Answer 2

var inputs = document.querySelectorAll("fieldset > input"),
    labels = document.querySelectorAll("fieldset > label");


for(var i=0; i < inputs.length; i++) {
  var input = inputs[i],
      label = labels[i];
  input.addEventListener("focus", function(event) {
    var input = this.input,
        label = this.label;
    if (label.classList.contains("label-blur")) {
      label.classList.remove("label-blur");
      label.classList.add("label-focus");
    } else {
      label.classList.add("label-focus");
    }
  }.bind({input: input, label: label}));

  input.addEventListener("blur", function(event) {
    var input = this.input,
        label = this.label;
    if (!input.value) {
      label.classList.remove("label-focus");
    } else {
      label.classList.add("label-blur");
    }
  }.bind({input: input, label: label}));
};

如果您使用的是ES6，则应在for循环后使用let而不是var