javascript addEventlistener "click" not working

Asked 24/11, 2015 at 23:44 Answered 26/9, 2021 at 16:35

Solved javascript html dom google-chrome-extension indexeddb

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" ?

Niemann answered 24/11, 2015 at 23:44 Comment(0)

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);

Libration answered 24/11, 2015 at 23:47 Comment(3)

Do 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". – Libration 24/11, 2015 at 23:53

addTodo() in addEventListener will expand to function(){ addTodo(); } – Melvamelvena 24/11, 2015 at 23:53

@Libration 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. – Niemann 25/11, 2015 at 0:32

For someone who still getting with this bug, my case is the menu has li > a

<li> <a class="menu-item">Menu item</a></li>

When I bind click event to a, It doesn't work I fix it by listen click event from li and use e.preventDefault()

It works now

Wey answered 26/9, 2021 at 16:35 Comment(0)

Instead of two DOMContentLoaded listeners, try one.

Change this:

window.addEventListener("DOMContentLoaded", init, false);

    window.addEventListener('DOMContentLoaded', function () {
      document.getElementById("newitem").addEventListener("click", addTodo(), false);
    });

To this:

window.addEventListener('DOMContentLoaded', function () {
  init();
  document.getElementById("newitem").addEventListener("click", addTodo, false);
});

Vaasta answered 25/11, 2015 at 9:8 Comment(0)

Recommended topics

Hot tags