Javascript button for todo list doesn't work
Question
I'm trying to get my button for my To-do list to work for days now.. The button is not working but I can't figure out what the problem is. I don't want to use "onclick" in the html file I want to do the click event in the javascript file.
And then I have been trying to figure out how to get the To-do list to work with adding new tasks and being able to mark the task complete without removing it but it was harder than i thought.. I'd love to get some pointers! Appreciate it guys
var closebtn = document.getElementsByClassName("close");
function todolist(){
var li = document.createElement('li');
var btn = document.getElementById('my-button').onclick = function(){
var list = document.getElementById('list');
var input = document.getElementById('task').value;
var func = addEventListener('my-button');
var textnode = documentcreateTextNode(input);
li.appendChild(textnode);
if (input === ' '){
alert("write")
} else {
document.getElementById(list).appendChild(li);
}
document.getElementById('task').value = " ";
var thePanTag = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
thePanTag.className = "close";
thePanTag.appendChild(txt);
li.appendChild(thePanTag);
for (i = 0; i < closebtn.length; i++){
closebtn[i].onclick = function(){
var Div = this.parentElement;
Div.style.display = none;
}}}}
<body>
<h2>To-do list!</h2>
<div>
<input type="text" id="task" placeholder="Write task" />
<button id="my-button">Add task</button>
</div>
<ul id="list">
<li>kaa</li>
<li>baa</li>
<li>ss</li>
<li>aa</li>
<li>aaa</li>
</ul>
1 answers
solution1
0 2021-11-17 09:09:44
I removed the unnecessary code and be aware of using the correct onlick function.
Try this:
var closebtn = document.getElementsByClassName("close"); todolist(); function todolist(){ var li = document.createElement('li'); var btn = document.getElementById('my-button').onclick = function(){ var ul = document.getElementById("list"); var li = document.createElement("li"); var input = document.getElementById('task').value; if(input!=''){ li.appendChild(document.createTextNode(input)); ul.appendChild(li); } } }
<h2>To-do list!</h2> <div> <input type="text" id="task" placeholder="Write task" /> <button id="my-button">Add task</button> </div> <ul id="list"> <li>kaa</li> <li>baa</li> <li>ss</li> <li>aa</li> <li>aaa</li> </ul>
solution2
-1 2021-11-17 08:58:58
This is a wrong syntax to add a event listener on a button
var func = addEventListener('my-button');
This is the correct one :
const addTaskBtn = document.getElementByID("my-button")
addTaskBtn.addEventListener("click",function()=>{
var li = document.createElement('li');
var btn = document.getElementById('my-button').onclick = function(){
var list = document.getElementById('list');
var input = document.getElementById('task').value;
var func = addEventListener('my-button');
var textnode = documentcreateTextNode(input);
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.