MDN describes the addEventListener() method as a function that will be called whenever the specified event is delivered to the target. In order for the code to work, you need to access the target.
Common targets are Element, Document, Window, and any object that supports events (such as XMLHttpRequest). In this article, we want to access an element so that we can assign it as a target for a specified event.
It allows you to select an element with a specific ID using the ID selector e.g. instead of `e.target.new-task-description` use `e.target.querySelector(‘#new-task-description’)`.
You can also select an element with a class using the class selector e.g. `e.target.querySelector(‘.new-task-description’)`.
Rename the node
There is a hack solution that is not recommended but works. Rename the node by replacing the dash in the ID or Class name with an underscore or simply remove the dash in all references to the node, e.g. `e.target.new_task_description.value` and `e.target.newtaskdescription.value`.
Creating a variable
Other methods to try
If I didn’t make a syntax error then in theory that would mean that chaining the getElementByClassName() method wouldn’t work either.
There are other methods that I did not try that you might want to check out depending on the element.
You can use the document.getElementsByTagName() method to select all elements of a specific HTML tag, like this:
And you can use the document.getElementsByName() method to select all elements with a specific name attribute, like this:
Testing and learning
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.