title: Why wont this addEventListener work when I assign elements to a class?
body: <p>I have two text inputs, and two date inputs. I created a variable and selected them all with a class using QuerySelectorAll, and put an click listener on it. The function on the listener  changes the textContent of a div element to "", or blank. </p>
  
  <p>However no matter what, I cant seem to get this to work with QuerySelectorAll. It works if i run this logic and select one of the inputs with an ID, but not if i try to create a class which selects all 4 input elements. What am i doing wrong?</p>
  
  <pre><code>    const getSum = () =&gt; {
    const inputs = ['dateInput1', 'dateInput2'];
    const outputs = ['result1', 'result2'];
  
    const arr = inputs.map(input =&gt; {
      return document.getElementById(input).value;
    });
  
    if(arr.every(element =&gt; !!element)){
      inputs.forEach((input, index) =&gt; {
      const inputValue = document.getElementById(input).value;
      if (inputValue.match(dateRegEx)) {
        var sum = 0;
        for (var i = 0; i &lt; inputValue.length; i++) {
          const num = parseInt(inputValue.charAt(i));
          if (!isNaN(num)) {
            sum += num;
          }
        }
        const total = (sum - 1) % 9 + 1;
        document.getElementById(outputs[index]).textContent = "Your number is: " + total;
      } 
    });
    } else {
   document.getElementById("errorMsg").textContent = "*error* please enter two dates and two names";
     }
  }
  
  const sumButton = document.querySelector(".sumNumbers");
  sumButton.addEventListener("click", getSum);
  
  const dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/;
  
  function clearErrorMsg(){
    document.getElementById("errorMsg").textContent = "";
  } 
  
  const cLickDeletesError = document.querySelectorAll(".clickClear");
  Array.from(clickDeletesError).forEach(function(cde){
   cde.addEventListener("click", clearErrorMsg);
  }
  
  const dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/;
  
  function clearErrorMsg(){
    document.getElementById("errorMsg").textContent = "";
  } 
  
  const cLickDeletesError = document.querySelectorAll(".clickClear");
  Array.from(clickDeletesError).forEach(function(cde){
   cde.addEventListener("click", clearErrorMsg);
  }
  </code></pre>