javascript addeventlistener timing updating

why is console.log being written out?

I have the following and am wondering how taskInput is being updated.

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?

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

<!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 1</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="Add Task" 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>

  <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

Solution

Apologies if I understood your question incorrectly. But you are asking why do you not have to update the value in JS manually for the taskInput (input field)?

Meaning why is it automatically fetching the new value that is typed each time?

If that is what you are asking then it is because when you write

const taskInput = document.getElementById('task');

it's actually grabbing the reference to the Element object representing the input field and not the actual .value property.

So taskInput is simply pointing to the input element object, and when the input element object is updated, your variable which is a reference to the element also shows that updated value.

Similar to this -

const obj = {
  value: 2
};
const reference = obj;
console.log(reference) // will output { value: 2 }
obj.value = 5;
console.log(reference) // will output { value: 5 }

So we never touched the reference variable directly we only updated obj but since reference is simply pointing to the value of obj (which is an object) it reflected the updated value as well

Check out these links for further reading: