![\"\"](\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2023-01-23-at-6.28.31-PM.png\")
<\/figure>\n\n\n\nYou can also select an element with a class using the class selector e.g. `e.target.querySelector(‘.new-task-description’)`.<\/p>\n\n\n\n
Rename the node<\/h3>\n\n\n\n
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`.<\/p>\n\n\n\n Any one of the 2 solutions will fix the JavaScript error; however, using a querySelector is the preferred solution because it is more elegant. <\/p>\n\n\n\n Another solution that I explored involved creating a variable called taskInput, assigning the node to that variable, and then chaining the variable taskInput to the target e.g. newTextInput = document.getElementById(“new-task-description”) but JavaScript did not work as I had expected when I tested it in the DOM.<\/p>\n\n\n\n When I tried to chain the getElementByID() method e.g. e.target.getElementByID(\u2018new-task-description\u2019), JavaScript threw an error. Perhaps there was a syntax error that I made and did not catch.<\/p>\n\n\n\n If I didn\u2019t make a syntax error then in theory that would mean that chaining the getElementByClassName() method wouldn\u2019t work either.<\/p>\n\n\n\n There are other methods that I did not try that you might want to check out depending on the element.<\/p>\n\n\n\n You can use the document.getElementsByTagName() method to select all elements of a specific HTML tag, like this:<\/p>\n\n\n\n getElementsByTagName(\u2018li\u2019)<\/p>\n\n\n\n And you can use the document.getElementsByName() method to select all elements with a specific name attribute, like this:<\/p>\n\n\n\n getElementsByName(\u2018new-task\u2019)<\/p>\n\n\n\n I\u2019m enrolled in the Flatiron School Software Engineering flex program and I\u2019ve been working through several labs. I was inspired to write this because I could not find an article to help me identify why JavaScript was throwing me an error. <\/p>\n\n\n\n Thankfully, the Flatiron School has technical coaches that helped me identify that the error was caused by JavaScript interpreting the dash as a minus, which I would have never guessed without their help because my syntax was correct. Hopefully, others learning JavaScript that don\u2019t have access to technical coaches find this article helpful. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"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…","protected":false},"author":238,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[416,11933],"tags":[],"class_list":{"0":"post-128825","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-code","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\n![\"\"](\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2023\/01\/Screen-Shot-2023-01-23-at-6.22.46-PM.png\")
<\/figure>\n\n\n\nCreating a variable<\/h3>\n\n\n\n
Other methods to try<\/h3>\n\n\n\n
Testing and learning<\/h2>\n\n\n\n