title: why is console.log being written out?
body: <p>I have the following and am wondering how taskInput is being updated.</p>
  <p>I grab taskInput at the top of my js. then I add a listener to the  form for 'submit'. So when I submit the form by clicking on add task why don't I have to grab taskInput again to see it's new value?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const taskInput = document.getElementById('task');
  const form = document.querySelector('form');
  const filter = document.querySelector('input[name="filter"]');
  const taskList = document.querySelector('ul.collection');
  const clearall = document.querySelector('.clear-tasks');
  
  loadAllEventListeners()
  
  function loadAllEventListeners(){
  
    form.addEventListener('submit',submit)
  
  }
  
  function submit(e){
    e.preventDefault();
    console.log(taskInput.value)
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
    &lt;title&gt;Task List&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col s12"&gt;
          &lt;div id="main" class="card"&gt;
            &lt;div class="card-content"&gt;
              &lt;span class="card-title"&gt;Task List 1&lt;/span&gt;
              &lt;div class="row"&gt;
                &lt;form id="task-form"&gt;
                  &lt;div class="input-field col s12"&gt;
                    &lt;input type="text" name="task" id="task"&gt;
                    &lt;label for="task"&gt;New Task &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;input type="submit" value="Add Task" class="btn"&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="card-action"&gt;
              &lt;h5 id="task-title"&gt;Tasks&lt;/h5&gt;
              &lt;div class="input-field col s12"&gt;
                &lt;input type="text" name="filter" id="filter"&gt;
                &lt;label for="filter"&gt;Filter Tasks&lt;/label&gt;
              &lt;/div&gt;
              &lt;ul class="collection"&gt;&lt;/ul&gt;
              &lt;a href="#" class="clear-tasks btn black"&gt;Clear Tasks&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script
    src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>