為什么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