爲什麼我的javascript不工作？但與鉻控制檯配合

Question

我想提取我的表單輸入的值在javascript對象中，但值不會返回在console.log中，它不會返回文本。但是，當我在Chrome控制檯中定義精確的代碼（「var sub」）時，它可以正常工作並返回值。

-------------------- HTML -------------------- ---

<div id="form2"> 
    <form action=""> 
     <h2>Where are you moving to?</h2> 
      <label for="">Collection</label> 
      <input id="lol" type="text"> 
      <label for="">Delivery</label> 
      <input type="text"> 
      <button type="button" name="button">Step 3</button> 
     </form> 
    </div> 

--------------的JavaScript -----------------------

var submit2 = document.querySelector（「＃form2> form> button」）;

var sub = document.querySelector（「＃lol」）。value;

var customer = [];

submit2.addEventListener（ 「點擊」，函數（）{ 的console.log（ 「點擊」）;`` 的console.log（子）; }）

------- ----------------- Chrome控制檯-------------------- 點擊 style.js：6 sub 「」 var sub = document.querySelector（「＃lol」）。value; 未定義 子 「ADSF」

Answer 1

請記住，字符串是一個原始值和對象外，將作爲值，而不是引用傳遞（這裏https://snook.ca/archives/javascript/javascript_pass見說明）

當瀏覽器加載頁面，它會評估所有的命令：

var submit2 = document.querySelector("#form2 > form > button"); 
/* var submit2 = Dom reference object button */ 

var sub = document.querySelector("#lol").value; 
/* sub = fixed empty string (the initial value of the input when the page loads) */ 

var customer = []; 

submit2.addEventListener("click", 
function() { 
    console.log("clicked"); 
    console.log(sub); 
    /* when this function runs, sub.value evaluate the empty string of sub variable instead of get the new value property of #lol */ 
} 
) 

嘗試改變的對象，而不是價值的參考：

var submit2 = document.querySelector("#form2 > form > button"); 

    /* var sub = document.querySelector("#lol").value; */ 
    var sub = document.querySelector("#lol"); 
    /* sub = #lol DOM object reference */ 

    var customer = []; 

    submit2.addEventListener("click", 
function() { 
    console.log("clicked"); 
    /* console.log(sub); */ 
    console.log(sub.value); 
    /* sub.value= new string of #lol object */ 
} 
)