title: input.addEventListener is not a function &
body: <p>Firstly, I had this code</p>
  
  <pre><code>var input = document.querySelector("fieldset &gt; input");
  var label = document.querySelector("fieldset &gt; 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");
    }
  });
  </code></pre>
  
  <p>It works correctly.</p>
  
  <p>Then I changed 'querySelector' on 'querySelectorAll'.
  I found information, that addEventListener doesn't work with querySelectorAll (<a href="https://stackoverflow.com/questions/21917343/js-error-object-has-no-method-addeventlistener">JS error object has no method addEventListener</a>).
  So the resolution is something like this:</p>
  
  <pre><code>var input = document.querySelectorAll("fieldset &gt; input");
  var label = document.querySelectorAll("fieldset &gt; label");
  
  
  for(var i=0; i &lt; 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");
      }
    });
  };
  </code></pre>
  
  <p>But this way I have new mistakes:</p>
  
  <ul>
  <li>Uncaught TypeError: Cannot read property 'contains' of undefined</li>
  <li>Uncaught TypeError: Cannot read property 'remove' of undefined</li>
  </ul>
  
  <p>Please, let me know, how to resolve this problems.</p>
  
  <p>I tryed this way (recommended by Conor Hastings):</p>
  
  <pre><code>    for(var i=0; i &lt; input.length; i++) {
        input[i].addEventListener("focus", function(event) {
          for(var j=0; j &lt; 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 &lt; label.length; j++) {
            if (!input.value) {
              label[j].classList.remove("label-focus");
            } else {
              label[j].classList.add("label-blur");
            }
          };
        });
      };
  </code></pre>
  
  <p>It's working better, but every 'addEventListener' works wrong. Now just "label-focus" is working. And it's working for every i (if <em>any</em> input:focus, <em>every</em> label is shown).</p>
  
  <p>And 'let j=i' instead of 'for(var j=0; j &lt; label.length; j++)' does not do anything.</p>