Javascript 当我将元素分配给类时，为什么这个addEventListener不能工作？

我有两个文本输入和两个日期输入。我创建了一个变量，并使用QuerySelectorAll通过一个类选择了所有变量，并在其上放置了一个click侦听器。侦听器上的函数将div元素的textContent更改为“”或空白

然而，不管怎样，我似乎无法让QuerySelectorAll实现这一点。如果我运行这个逻辑并选择一个ID为的输入，它就会工作，但如果我试图创建一个选择所有4个输入元素的类，它就不会工作。我做错了什么

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

const getSum=（）=>{
常量输入=['dateInput1'，'dateInput2']；
常量输出=['result1'，'result2']；
const arr=inputs.map（输入=>{
return document.getElementById（input）.value；
});
if（arr.every（element=>！！element））{
inputs.forEach（（输入，索引）=>{
const inputValue=document.getElementById（输入）.value；
if（inputValue.match（dateRegEx））{
var总和=0；
对于（变量i=0；i

querySelectorAll

返回一个集合，因此您不能直接向其中添加事件侦听器。因此，请使用从中获取数组。然后使用

forEach

迭代并添加事件侦听器

函数clearErrorMsg（）{ document.getElementById（“errorMsg”）.textContent=“”； } […document.queryselectoral（“.clickClear”）].forEach（（e）=>{ e、 addEventListener（“单击”，clearErrorMsg） })；

这是一个错误

事实上，我没有包含完整的html，实际上有4个classI输入。我觉得值得注意的是，只要你没有运行一些超级过时的浏览器（如果你是，那么

=>

无论如何都会抛出一个错误），您不需要将节点列表转换为数组。节点列表支持

.forEach

以及

for..of

语法。它们还具有

length

属性，这意味着它们可以在常规

for..let i

循环中使用。