javascript addEventlistener"；点击"；不起作用_Javascript_Html_Dom_Google Chrome Extension_Indexeddb

javascript addEventlistener"；点击"；不起作用

javascript html dom google-chrome-extension

javascript addEventlistener"；点击"；不起作用,javascript,html,dom,google-chrome-extension,indexeddb,Javascript,Html,Dom,Google Chrome Extension,Indexeddb,我正在制作一个待办事项列表作为Chrome的新标签扩展 <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?" sty

我正在制作一个待办事项列表作为Chrome的新标签扩展

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

我的html文件：

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

为什么当我单击按钮w/id=“newitem”？

时什么都没有发生？附加函数时，您首先执行它，然后将返回值

未定义

附加到事件。删除括号：

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

.addEventListener("click", addTodo, false);

当您将

addTodo（）

作为参数时，您并没有传递函数本身。它要做的第一件事是执行函数并使用返回值作为参数

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

由于没有

返回

语句的函数隐式导致

未定义

，因此原始代码实际上正在运行函数，然后附加以下内容：

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

.addEventListener("click", undefined, false);

不要使用两个

DOMContentLoaded

侦听器，而是尝试一个

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

更改此项：

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

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

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

为此：

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

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

如果控制台中出现任何错误，是否可以在

addTodo

顶部记录消息？没有人能用“不工作”来做什么。

addEventListener中的addTodo（）
将扩展到function（）{addTodo（）；}
@TbWill4321我的道歉。关于数据库，我的类函数中还有更多的问题。我让它工作了。谢谢你的帮助，括号也是个问题。为什么addTodo（）
不起作用？如果是一个愚蠢的问题，很抱歉，我是Javascript新手。