javascript addEventlistener "click" not working
When attaching the function, you are executing it first, and attaching the return value undefined
to the event. Remove the parenthesis:
.addEventListener("click", addTodo, false);
When you put addTodo()
as a parameter, you are not passing the function itself. The first thing it does is execute the function and use the return value as the parameter instead.
Since functions without a return
statement implicitly result in undefined
, the original code was actually running the function, and then attaching this:
.addEventListener("click", undefined, false);
Jason Woo
Updated on September 27, 2021Comments
-
Jason Woo over 2 years
I am working on making a To-Do list as a Chrome new tab extension.
My html file:
<head> </head> <body> <h2 id="toc-final">To Do List</h2> <ul id="todoItems"></ul> <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;"> <button id="newitem" value="Add Todo Item">Add</button> <script type="text/javascript" src="indexdb.js"></script> </body> </html>
Previously the button element was an input type with onClick(), but Chrome does not allow that. So I had to make a javascript function that will fire when it's clikced. In my indexdb.js:
var woosToDo = {}; window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB; woosToDo.indexedDB = {}; woosToDo.indexedDB.db = null; window.addEventListener("DOMContentLoaded", init, false); window.addEventListener('DOMContentLoaded', function () { document.getElementById("newitem").addEventListener("click", addTodo(), false); }); ... ... function addTodo() { var todo = document.getElementById("todo"); woosToDo.indexedDB.addTodo(todo.value); todo.value = ""; }
Why is nothing happening when I click the button w/ id="newitem" ?
-
TbWill4321 over 8 yearsDo you get any errors in console, can you log a message at the top of
addTodo
? There's not much anyone can do with "doesn't work". -
Ramanlfc over 8 years
addTodo()
inaddEventListener
will expand tofunction(){ addTodo(); }
-
Jason Woo over 8 years@TbWill4321 My apologies. There were further problems in my class functions regarding the database. I got it to work. Thank you for your help, the parenthesis was a problem as well. Why is it that
addTodo()
doesn't work? Sorry if a silly question, I am new to Javascript.