Hallo,
verstehe nicht warum der Fehler kommt.
Hat jemand vielleicht eine Erklärung dafür?
Wäre sehr dankbar
verstehe nicht warum der Fehler kommt.
Hat jemand vielleicht eine Erklärung dafür?
Wäre sehr dankbar
HTML-Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <title>Task List</title> </head> <body> <div class="container"> <div class="row"> <div class="col s12"> <div "id=main" class="card"> <div class="card-content"> <span class="card-title">Task List </span> <div class="row> <form id="task-form"> <div class="input-field col s12"> <input type="text" name="task" id="task"> <label for="task">New Task</label> </div> <input type="submit" value="addTask" class="btn"> </form> </div> </div> <div class="card-action"> <h5 id="task-title">Tasks</h5> <div class="input-field col s12"> <input type="text" name="filter" id="filter"> <label for="filter">Filter Tasks</label> </div> <ul class="collection"></ul> <a href="#" class="clear-tasks btn black">Clear Tasks</a> </div> </div> </div> </div> </div> </div> <script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <script src="app1.js"></script> </body> </html>
Code:
//Define UI Vars constform=document.querySelector('task-form'); consttaskList=document.querySelector('.collection'); constclearBtn=document.querySelector('.clear-task'); constfilter=document.querySelector('#filter'); consttaskInput=document.querySelector('#task'); //Load all event Listeners loadEventListeners(); // Load all event Listeners functionloadEventListeners(){ //Add task event form.addEventListener("submit",addTask,); } //Add Task functionaddTask(e){ if(taskInput.value===''){ alert('Add a task'); } // Create li element constli=document.createElement('li'); //Add class li.className='collection-item'; //Create text node and append to li li.appendChild(document.createTextNode(taskInput.value)); //Create new link element constlink=document.createElement('a'); //Add class link.className='delete-item secondary-content'; //Add icon html link.innerHTML='<i class="fa fa-remove"></i>'; //Append the link to li li.appendChild(link); // Append li to ul taskList.appendChild(li); //Clear input taskInput.value=''; e.preventDefault(); }
Kommentar