javascript addEventlistener“点击”不工作 [英] javascript addEventlistener "click" not working
问题描述
我的html文件：
< 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“点击”不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
