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