javascript addEventlistener“点击”不工作

本文介绍了javascript addEventlistener“点击”不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的html文件：

我正在努力制作To-Do列表作为Chrome新标签扩展名。 >

 < head> 
< / head> 
 
< body> 
< h2 id =toc-final>待办事项列表< / h2> 
< ul id =todoItems>< / ul> 
< input type =textid =todoname =todoplaceholder =你需要做什么？ style =width：200px;> 
< button id =newitemvalue =Add Todo Item>添加< / button> 
 
< script type =text / javascriptsrc =indexdb.js>< / script> 
< / body> 
< / html>

以前，button元素是带有onClick（）的输入类型，但Chrome不允许。所以我必须制作一个javascript函数，当它被cliked时会触发。在我的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）; 
 }）; 
 
 ... 
 ... 
 
函数addTodo（）{
 var todo = document.getElementById（todo）; 
 woosToDo.indexedDB.addTodo（todo.value）; 
 todo.value =; 
}

为什么当我点击按钮w / id =newitem ？

解决方案

附加函数时，首先执行它，并附加返回值 undefined 到事件。删除括号：

  .addEventListener（click，addTodo，false）;

编辑：解释。

当你将 addTodo（）作为参数，您不会传递函数本身。它的第一件事是执行该函数并使用返回值作为参数。

由于没有的函数返回语句隐含地导致 undefined ，原始代码实际上是运行该函数，然后附加：

  .addEventListener（click，undefined，false）;

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

解决方案

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

Edit: Explaination.

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

这篇关于javascript addEventlistener“点击”不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！