.addeventlistener() is not a function

Question

I’m building a script for modals, but an unexpected error happened, the console says:

Uncaught Typeerror: loginBtn.addeventlistener is not a Function`", "at modaisGeral (index.html:233)" and "at index.html:235",

How can I correct?

function modaisGeral(){
    var principalModal = document.querySelector("modais");//Recebe um elemento
    var loginBtn = document.querySelectorAll(".login-modal-open");//Recebe um array de elementos
    var loginModal = document.getElementById("login-modal");//Recebe o modal de login

    loginBtn.addEventListener("click", function(){});

}modaisGeral();

Answer 1

document.querySelectorAll returns a list of elements and not an element as such.

Soon, loginBtn is a array and cannot add a eventListener in a array.

If you want to add the same eventListener for all elements of this array, will need to loop the elements and add it.

var elementos = document.querySelectorAll('.login-modal-open');

for(var el of elementos){
  el.addEventListener('click', function(){
    console.log(this.id);
  });
}

<a id="1" class="login-modal-open" href="#">Link 1</a>
<img id="2" class="login-modal-open"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAABHFJREFUWIW9l1tsVGUQgL+Z0xbabqk2aitRmgC7pVz6YniQB0sjl0dCFJ+M8RLfjIaAwRDx9AAPGJR6S0yIiQHji1ESX7y03u+J8RIQLC1iiEApUG13txey3RkfdrcpbWmX0vA/nX9m/pnvn/PPmf8IN2G4IwOtS5Yowcog0H8qX+j8paAruRkA/724eEGpBt0A5tk3gTEAvRkANc+dHjDjHAAmK8fr5hRgMEqsToWJ9z2snz9RJ/gf+ccmd2TOAZJhw4Ojxo8oD6SlLJpkIHIsH7F6eG/jojkH8HnyJeqXAExk+0DYsOYqvfrxwnPGRsdew5wBVO/s7AuMJ/JOVdUP9exvqizoS7JaeAUIsmrOAQBiUfdHOAfz06WVgyP7CroKkifM8NzMbzwD9vJd5VPJh7xkG2Z/A4jwVCpK3A8gUc+QKn8B+LhKmBXAULh40WB6/tlUFG+dCFIbnUg78mhht2a8/e++xdU5avIH0Ro9bC6ZNUCWkgOgNSBhOln+ZzKKbx5fWgui7m9ErA1AlbtLr5S05QLnSlHRslRwPj5rABE+NKMXQFTqBTmS2p34JBkmlhVsYlUjz4N15qePJaPEJlzGKkFcV84aINba9U4GS7jbAcNGAQQ2uNqxZJR46XK4dIFuOzus6CNmZAEcDrpzDrMU8JMZV/Lrbmwkd8cbycqroqwvyAy/oCLPxnZ1vZveHY9AdoF1uunmqtaukyKFarhOgJ79TZV1248OjXcAuW6Xao1vBg6ISv2Ywux7Nd06GvjaqqrhN3Tb2eGJPq8LIBUmjrhyj7i1I0G7lcoX1Ts7+8ZAwjsr0hLbYS47VJmXE9pbVa2nnryWz6IBPGwuSWvPJeCWgswMF/xXETpw6Yhx5QeJzoz0h/HFgdIGshYbjVdFpy/eMEBvuDxWLpk9LqxTrm6pY0AwIsa3Lt4RuH0uyMXK6NTZ6fxeE6C9vb1RVcuz2ezJjRs3Do7XDYYNCz2wdeasc1ivSN1UPtRk9XdrXusrhRopKzvT0tJyeaLNtW9E7h/jXq+qLcBX41WV0cnzwGHgsDuS3tOwEvN1Lr4B5D6BCqC/YsXJ3wL4wFQ3kclsBV4pHmDCSLUmtrp4PU6vq/YGWbsgQdA7vDdzsbI626XPnDoGtHm4vCxNdg1BdqE8RPazT6f3W/yd0NkiIvciIO64Cu4GHjDYD6kwMQB2IamZHkF61INDxbi9jkup3zbtmVWqQasVGgDc/Wdghv1fB0CM7mXJ0mW36mimDg/qcKlDvBb3WkfqEOrcqEW9FpPbVfxCMX6LAnBHBvfEVwVXspJrH94H3odzHEBwxr6NBpRmtaK0v3vOAGhtDlx7fi+6dWUD0pmaZuj7ZibT4lyu+NpnNprdKC4DWzAifxqZcApd83Ozqxeoaqnm/oREfLpdzgggIpLrft2vFwU7ef202ZsRwN0f7+joaC4qmE/erJk1iV47BzNnAB4uJnjOePJ3QqeQFQWgIu/hfkcxcX2KNIu7AVi+QAP3o1Ot/R9zgtDvjYmoxQAAAABJRU5ErkJggg==" />
<button id="3" class="login-modal-open">Botão 3</button>
<button id="4" class="login-modal-open">Botão 4</button>
<a id="5" class="login-modal-open" href="#">Link 5</button>

Answer 2

Complementing the @jbueno response /a/199222/13469

You would have to choose which index of this array you would add the event, for example:

loginBtn[0].addEventListener("click", function(){});

So you would add the event to the first element found that has the class informed.

To add the event to all elements corresponding to document.querySelectorAll, you could do so:

for (var i = 0; i < loginBtn.length; i++)
  loginBtn[i].addEventListener("click", function() {alert('Funcionou!')});