为什么console.log被写出？

Question

我有以下内容，我想知道 taskInput 是如何更新的。

我在我的 js 顶部抓取 taskInput。 然后我在“提交”表单中添加一个监听器。 因此，当我通过单击添加任务提交表单时，为什么我不必再次抓取 taskInput 来查看它的新值？

 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>

Answer 1

抱歉，如果我对您的问题的理解不正确。 但是您问为什么不必为taskInput（输入字段）手动更新JS中的值？

这意味着为什么它会自动获取每次输入的新值？

如果那是您要问的，那是因为当您写作时

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

它实际上是在获取对表示输入字段的元素object 的引用，而不是实际的.value属性。

所以taskInput只是简单地指向输入元素 object，当输入元素 object 更新时，作为该元素引用的变量也会显示更新后的值。

与此类似——

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

所以我们从来没有直接接触过reference变量，我们只更新了obj但由于reference只是指向obj的值（它是一个对象），它也反映了更新的值

查看这些链接以进一步阅读：

Answer 2

您不是从输入字段值创建 const，而是从 id="task" 本身的输入 DOM 元素创建。 DOM 元素是具有随时间变化的属性的对象。 const 赋值引用了 DOM 元素的这个确切实例。 通过对 object 的 const 分配，您无法更改对新 object 的引用，但 object 中的每个值仍然是可变的。

为什么console.log被写出？

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-04-12 20:12:13

解决方案2
0 2021-04-12 20:05:12

为什么console.log被写出？

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-04-12 20:12:13

解决方案2 0 2021-04-12 20:05:12

解决方案1
2 已采纳 2021-04-12 20:12:13

解决方案2
0 2021-04-12 20:05:12