input.addEventListener不是函数＆

Question

Firstly, I had this code

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");
  }
});

It works correctly.

Then I changed 'querySelector' on 'querySelectorAll'. I found information, that addEventListener doesn't work with querySelectorAll ( JS error object has no method addEventListener ). So the resolution is something like this:

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");
    }
  });
};

But this way I have new mistakes:

• Uncaught TypeError: Cannot read property 'contains' of undefined
• Uncaught TypeError: Cannot read property 'remove' of undefined

Please, let me know, how to resolve this problems.

I tryed this way (recommended by 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");
          }
        };
      });
    };

It's working better, but every 'addEventListener' works wrong. Now just "label-focus" is working. And it's working for every i (if any input:focus, every label is shown).

And 'let j=i' instead of 'for(var j=0; j < label.length; j++)' does not do anything.

Answer 1

The same way you are accessing input through the i in the for loop you need to do with the label in order to get the label in the same index as the input in the labels NodeList

You'll also have to do the same thing inside of the input[i] event listener

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}));
};

If you are using ES6, then you should use let instead of var after the for loop