CODEWITHSUNDEEP
javascripthtmlcssfunction
nineborn
nineborn

Reputation: 105

Why wont this addEventListener work when I assign elements to a class?

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.

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?

    const getSum = () => {
  const inputs = ['dateInput1', 'dateInput2'];
  const outputs = ['result1', 'result2'];

  const arr = inputs.map(input => {
    return document.getElementById(input).value;
  });

  if(arr.every(element => !!element)){
    inputs.forEach((input, index) => {
    const inputValue = document.getElementById(input).value;
    if (inputValue.match(dateRegEx)) {
      var sum = 0;
      for (var i = 0; i < 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);
}

Upvotes: 1

Views: 47

Answers (1)

brk
brk

Reputation: 50291

querySelectorAll returns a collection, So you cannot directly add event listener to it. So use spread syntax to get an array from it. Then use forEach to iterate and add event listener

function clearErrorMsg() {
  document.getElementById("errorMsg").textContent = "";
}
[...document.querySelectorAll(".clickClear")].forEach((e) => {
  e.addEventListener("click", clearErrorMsg)
});
<div class="cell-1" id="centerElement">
  <div id="cell-1-nest-l"></div>
  <div id="cell-2-nest-l"></div>
  <div id="cell-3-nest-l"></div>
  <div id="cell-4-nest-l"></div>
  <div id="cell-5-nest-l"></div>
  <div id="cell-6-nest-l">
    <input type="text" class="nameStyle1 clickClear" id="nameInput1" placeholder="Your Name"></div>

</div>

<div id='errorMsg'> Here is Error</div>

Another alternative is use of querySelector instead of querySelectorAll. This is because there is only one relevant element with that class. So using querySelectorAll is an overhead in this case

function clearErrorMsg() {
  document.getElementById("errorMsg").textContent = "";
}
document.querySelector(".clickClear").addEventListener("click", clearErrorMsg)
<div class="cell-1" id="centerElement">
  <div id="cell-1-nest-l"></div>
  <div id="cell-2-nest-l"></div>
  <div id="cell-3-nest-l"></div>
  <div id="cell-4-nest-l"></div>
  <div id="cell-5-nest-l"></div>
  <div id="cell-6-nest-l">
    <input type="text" class="nameStyle1 clickClear" id="nameInput1" placeholder="Your Name"></div>

</div>

<div id='errorMsg'> Here is Error</div>

Upvotes: 2

Related Questions