为什么我的 Javascript 不起作用？但适用于 Chrome 控制台答案

【问题标题】：Why is my Javascript not working? but works with Chrome console为什么我的 Javascript 不起作用？但适用于 Chrome 控制台
【发布时间】：2017-10-15 20:32:53
【问题描述】：

我正在尝试在 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("click", function() {
     console.log("clicked");``
     console.log(sub);
})

------------Chrome 控制台 --------

clicked
style.js:6 
sub
""
var sub = document.querySelector("#lol").value;
undefined
sub
"adsf"

【问题讨论】：

标签： javascript dom-events

【解决方案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 */
 }
)

【讨论】：

感谢马塞洛的回复。抱歉，您还没有尝试回答，但我只是尝试了一些事情，当我将变量 (var sub) 放在函数旁边时，它就起作用了。知道这是为什么吗？..
@ADRai 在浏览器加载时检查#lol 值并将子作为字符串放入。当点击事件引发时，函数获取字符串的空值，而不是询问#lol的当前值属性
但是值应该是一个字符串，因为它的文本..即使我把它放在函数中，我仍然得到一个我想要的字符串..但是为什么我没有得到我原始代码中的字符串..
@ADRai 抱歉，我用详细信息编辑我的答案。在函数内部它可以工作，因为您将在 #lol.value 更改后获得静态字符串。

【解决方案2】：

这是正确答案：

javascript 应该等待，直到 DOM 完全加载。

window.addEventListener('DOMContentLoaded', start);

function start() {
  console.log('DOM fully loaded and parsed');
  // your code
}

大多数人会使用 'load' 事件，但它不如 DOMContentLoaded 事件有效。

【讨论】：

您能接受这个答案吗？只需点击答案旁边的灰色复选标记即可。