title: Uncaught Reference Error: form is not defined at loadEventListeners
body: <p>I do not understand why I am getting this error. its giving me that my <code>loadEventListeners</code> is not defined. i do not understand why it is not defined... any input would be helpful.</p>
  
  <pre><code>//Define ui var
  const from = document.querySelector('#post-form');
  const postList = document.querySelector('.collection');
  const clearBtn = document.querySelector('.clear-posts');
  const filter = document.querySelector('#filter');
  const postInput = document.querySelector('#post');
  
  // load all event listeners
  loadEventListeners();
  
  //load all event listners
  function loadEventListeners(){
    //add Post Event
    form.addEventListener('submit', addPost);
  }
  
  //Add post
  function addPost(e){
    if(postInput.value === ''){
      alert('Add a post');
  }
  
    //create li element
    const li = document.createElement('li');
    //add class
    li.className = 'collection-item';
    //create text node and append to li
    li.appendChild(document.createTextNode(postInput.value));
    //create new link element
    const link = document.createElement('a');
    //add class
    link.className = 'delete-item secondary-content';
    //add icon html
    link.innerHTML= '&lt;i class="fa fa-remove"&gt;&lt;/i&gt;';
    //append the link to li
    li.appendChild(link);
  
    //append li to ul
    console.log(li);
  
    e.preventDefault();
  }
  </code></pre>