Error: The method ele.addEventListener is not valid

Question

Error: The method ele.addEventListener is not valid

Can someone please help me identify the issue in my code? I've included both HTML and JavaScript below. The code runs without any errors in Visual Studio Code, but when I try to use it on an online site, I get the following error message: "Uncaught TypeError: ele.addEventListener is not a function".

**<input type="text" name="" id="mon" class="key" placeholder="Monday">
<input type="text" name="" id="tues" class="key" placeholder="Tuesday">
<script>
var ele = document.querySelectorAll("#mon, #tues");

ele.addEventListener('keypress', demo);

function demo(){
alert();
}
</script>**

javascript

Answer 1

Answer №1

Given that ele represents the NodeList array, an addEventListener has been linked to each individual Node.

<input type="text" name="" id="mon" class="key" placeholder="Monday">
<input type="text" name="" id="tues" class="key" placeholder="Tuesday">
<script>
var ele = document.querySelectorAll("#mon, #tues");
 for (let i = 0; i < ele.length; i++) {
     ele[i].addEventListener("click", demo);
 }


function demo(){
alert();
}
</script>

Answer 2

Given that ele represents the NodeList array, an addEventListener has been linked to each individual Node.

<input type="text" name="" id="mon" class="key" placeholder="Monday">
<input type="text" name="" id="tues" class="key" placeholder="Tuesday">
<script>
var ele = document.querySelectorAll("#mon, #tues");
 for (let i = 0; i < ele.length; i++) {
     ele[i].addEventListener("click", demo);
 }


function demo(){
alert();
}
</script>

Answer 3

Answer №2

document.querySelectorAll gives back a list of elements instead of a single one. This means that ele is actually an array, making it impossible to attach an eventListener directly to an array.

If you want to apply the same eventListener to all elements in the el array, you'll need to loop through each element and add the listener individually, like so:

for (var el of ele) {
  el.addEventListener('keypress', function() {
    alert();
  });
}

Answer 4

document.querySelectorAll gives back a list of elements instead of a single one. This means that ele is actually an array, making it impossible to attach an eventListener directly to an array.

If you want to apply the same eventListener to all elements in the el array, you'll need to loop through each element and add the listener individually, like so:

for (var el of ele) {
  el.addEventListener('keypress', function() {
    alert();
  });
}

Error: The method ele.addEventListener is not valid

Answer №1

Answer №2

Similar questions

Utilizing SVG icons with AngularJS for optimal compatibility in Firefox

Multiplying array elements within the Vuex state with the assistance of Socket.io

Count the occurrences of values in a JSON object using JavaScript

Does Mongoose use asynchronous saving?

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

A guide on tallying blog categories using Django and showcasing them on a template

Handling node_redis callbacks in Node.js

Exploring Ways to Modify a .txt File with Javascript or jQuery Forms

Pressing the enter key within Material UI Autocomplete will allow you to quickly create new

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

I am trying to launch an Android application on a device using Appium and Desired capabilities, but I am facing difficulty in navigating to elements that are not currently visible

Certain characteristics remain constant while others experience variations

What is causing my console to be spammed by Web3 .GetReserves()?

Choose various cells on the grid of a canvas by dragging the mouse

Checking with jQuery Validate: displaying an error message if input matches a certain value

Keep the sidebar in place as soon as one of its child elements reaches the top, ensuring that the child element remains on top of it with an automatically

the else/if statement executes only on the first run

Click on a button to display the corresponding DIV while hiding the rest, all achieved with the power of Vue

Utilizing Metalness with the MTLLoader in three.js

Is there a way to reverse the process of Date.parse?