Menu
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" ?
986
The "addEventListener is not a function" error occurs for multiple reasons: calling the method on an object that is not a valid DOM element. placing the JS script tag above the code that declares the DOM elements. misspelling the addEventListener method (it's case sensitive).
Summary: addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.
To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.
Add an Event Handler to the window Object The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
