当您使用 querySelectorAll() 或 getElementsByClassName() 时，您会得到一个元素列表。您需要从该列表中拉出一个元素，才能对其调用 addEventListener() 。

示例：

var userInputs = document.getElementsByClassName('userInput');
var input = userInputs[0];

由于未提供 HTML，因此无法 100% 确定 OP 代码出了什么问题， 但是 我可以放心地假设您希望监听多个元素的事件。有几种方法可以实现您的目标：

1. 使用循环或数组方法遍历多个元素。 在每个循环中为当前元素分配一个事件处理程序 。

   for (let i=0; i < list.length; i++) {
   list[i].addEventListener('click', eventHandler);
   }
   

2. 为每个元素分配一个 on event 属性 。

   <button onclick='eventHandler()'>CLICK</button>
   <button onclick='eventHandler()'>CLICK</button>
   

3. 事件委托 是一种利用 事件冒泡 和 事件对象 的模式。基本上，如果有一组元素需要监听事件，我们只需将 一个 eventListener 分配给该组元素共有的祖先元素（我们甚至可以使用 document 或 window ）。这样做，我们的资源就不会被绑定在多个 eventHandlers / eventListeners 中，我们也不会因为输入 100 个 onclick 事件而患上腕管综合症。⭐ 推荐

演示 1

在 NodeList 或数组的每次迭代上注册 eventHamdlers/eventListeners

/* Collect all .btn class in a NodeList then convert it into
|| an array
*/
var btnArray = Array.from(document.querySelectorAll('.btn'));

// Reference the output.out
var out = document.querySelector('.out');

/* run arry through forEach() array method...
|| on each loop assign an onclick eventHandler or eventListener to
|| current button.btn
*/
btnArray.forEach(function(btn, idx) {

  btn.addEventListener('click', function() {

    var txt = btn.textContent;

    out.textContent = txt;
    
  });

});

.out,
button {
  display: inline-block;
  color: blue;
  font: 900 20px/1 Consolas;
  width: 5ch;
  text-align: center;
}

.out {
  color: red;
  width: 100%;
  font-size: 30px
}

<fieldset class='set'>
  <button class='btn'>BTN0</button>
  <button class='btn'>BTN1</button>
  <button class='btn'>BTN2</button>
  <button class='btn'>BTN3</button>
  <button class='btn'>BTN4</button>
  <button class='btn'>BTN5</button>
  <button class='btn'>BTN6</button>
  <button class='btn'>BTN7</button>
  <button class='btn'>BTN8</button>
  <button class='btn'>BTN9</button>
  <button class='btn'>BTNA</button>
  <button class='btn'>BTNB</button>
  <button class='btn'>BTNC</button>
  <button class='btn'>BTND</button>
  <button class='btn'>BTNE</button>
  <button class='btn'>BTNF</button>
  <output class='out'>X</output>
</fieldset>

演示 2

在每个上分配一个 on 事件属性元素

var out = document.querySelector('.out');

function eventHandler(event) {
  var txt = event.target.textContent;
  out.value = txt;
}

.out,
button {
  display: inline-block;
  color: blue;
  font: 900 20px/1 Consolas;
  width: 5ch;
  text-align: center;
}

.out {
  color: red;
  width: 100%;
  font-size: 30px
}

<fieldset class='set'>
  <button class='btn' onclick="eventHandler(event,this)">BTN0</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN1</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN2</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN3</button>
  <button class='btn' onclick="eventHandler(event,his)">BTN4</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN5</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN6</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN7</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN8</button>
  <button class='btn' onclick="eventHandler(event,this)">BTN9</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNA</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNB</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNC</button>
  <button class='btn' onclick="eventHandler(event,this)">BTND</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNE</button>
  <button class='btn' onclick="eventHandler(event,this)">BTNF</button>
  <output class='out'>X</output>
</fieldset>

演示 3

事件委托

详细信息在演示中注释

⭐ 推荐

// Reference the parent element
var set = document.querySelector('.set');

/* Register parent to click event it will trigger not only when 
|| it is clicked, it will also trigger callback if any of ts 
|| descebdant elements are clicked as well.
*/
set.addEventListener('click', eventHandler);

// Callback function passes the Event Object
function eventHandler(even) {

  // Reference an output.out
  var out = document.querySelector('.out');

  // if the clicked element (event.target) has the class .btn...
  if (event.target.className === "btn") {

    // ...Get event.target's text
    var txt = event.target.textContent;

    // Display the text
    out.value = txt;
  }

  return false;

};

.out,
button {
  display: inline-block;
  color: blue;
  font: 900 20px/1 Consolas;
  width: 5ch;
  text-align: center;
}

.out {
  color: red;
  width: 100%;
  font-size: 30px
}

<fieldset class='set'>
  <button class='btn'>BTN0</button>
  <button class='btn'>BTN1</button>
  <button class='btn'>BTN2</button>
  <button class='btn'>BTN3</button>
  <button class='btn'>BTN4</button>
  <button class='btn'>BTN5</button>
  <button class='btn'>BTN6</button>
  <button class='btn'>BTN7</button>
  <button class='btn'>BTN8</button>
  <button class='btn'>BTN9</button>
  <button class='btn'>BTNA</button>
  <button class='btn'>BTNB</button>
  <button class='btn'>BTNC</button>
  <button class='btn'>BTND</button>
  <button class='btn'>BTNE</button>
  <button class='btn'>BTNF</button>
  <output class='out'>X</output>
</fieldset>

我以前遇到过这个问题。尝试在 submitButton 上使用 console.log。但在某些情况下，获取 DOM 元素的最佳方法是通过 getElementsById。或者使用 JQuery 来实现高级目的。