javascript - 为什么我不能在定义 var 时放置 .value 属性？

Question

document.write('<input type="text" id="start" placeholder="start"><br> <input type="text" id="end"><br> <button id ="generate">Click to Generate</button>');
var start = document.getElementById("start"),
    end = document.getElementById("end"),
    myButton= document.getElementById("generate"); 
myButton.onclick = function() {
  "use strict";
  document.write("<select>");
  var years;
  for (years = start.value; years <= end.value; years++){
    document.write("<option value=\"" + years + "\">" + years + "</option>");
  }
    document.write("</select>");
};

当我尝试将 (.value) 属性放在函数外部时，它不会像这样工作:

var start = document.getElementById("start").value,
 end = document.getElementById("end").value; 

Answer 1

因为输入元素的值为空，并且您在页面加载时运行此 JS。执行 onclick 函数时，start 和 end 已包含文档加载时的值(“”和“”)

当您使用元素对象时，您将在 onclick 函数中获取新鲜的值，因此它将检索并使用输入中的实际值onclick 运行时。