Ankündigung

Einklappen
Keine Ankündigung bisher.

Uncaught Type Error: Cannot read property 'addEventListener' of null

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Uncaught Type Error: Cannot read property 'addEventListener' of null

    Hallo,

    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();
      }


  • #2
    Da hast das # vor task-form vergessen. Deshalb enthält die Variable form den Wert null.

    Kommentar


    • #3
      Der fehler bleibt trotzdem

      Kommentar


      • #4
        Tja, dann debuggen. Schau nach in welcher Zeile der Fehler auftritt und hangel dich von dort aus weiter.

        Den Sauhaufen von Code werd ich mir jedenfalls nicht vollständig anschauen. Wenn du da erweiterte Hilfe willst, solltest du dich etwas bemühen und nicht einfach nur einen Müllhaufen ins Forum klatschen.

        Kommentar


        • #5
          Also im Html hast du Gänsefüßchen vergessen bzw an falscher stelle gemacht zb "id=bla" slo vor id ?
          Dann ist nach Function kein Leerzeichen( Kann auch durch Copy & Paste passiert sein ) ,Das kann auch nicht gehen . Dein addEventListner hat noch ein form davor und das ist nicht definiert.Wie auch es gibt nix mit form auser das Submit form ,aber der brauch kein addEventListener. Dann hast du im Html noch einige tags die nicht geschlossen sind oder zu viel sind. Ich weiß ja nicht was du genau vor hast ,aber mach dich mal etwas mit der Materie vertraut. Ich bin auch nicht die grosse Leuchte,solche Fehler habe ich am Anfang auch alle gemacht. Wenn du die Fehler beseitigt hast dann meld dich wenn es immer noch nicht geht

          Kommentar

          Lädt...
          X