why is console.log being written out?

Question

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>

Having a hard time understanding your question. The `taskInput` variable is set the the `` DOM element so `taskInput.value` will always hold the **current** value of the ``. — 0stone0, Apr 12 '21 at 19:45
Also, not quite sure how this is related to [tag:addeventlistener] or [tag:timing]. — 0stone0, Apr 12 '21 at 19:49
you save a reference to the element in a variable, why would you need to get a reference to the element again if the element hasn't changed? — bryan60, Apr 12 '21 at 20:00

score 2 · Accepted Answer · answered Apr 12 '21 at 20:12

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:

score 0 · Answer 2 · answered Apr 12 '21 at 20:05

You are not creating a const from the input-field value but from the input DOM Element with id="task" itself. DOM Elements are objects with properties wich can change over time. The const assignment references this exact instance of the DOM element. With a const assignment to an object you cannot change the reference to a new object but every value in the object is still mutable.

why is console.log being written out?

2 Answers2