为何无法在函数外部获取文本框的值？JS技术问询

你遇到的问题核心是DOM元素的加载时机和代码执行顺序不匹配：

1. 全局作用域的代码会在页面加载过程中立即执行，这时候如果HTML里带textbox_properties类的文本框还没被浏览器解析渲染完成，document.getElementsByClassName("textbox_properties")返回的就是空的HTMLCollection，input[0]自然是undefined，尝试读取它的value属性就会抛出你看到的类型错误。
2. animal是普通字符串变量，和DOM无关，所以全局定义后能正常访问。当你把textbox_response = input[0].value放进verify_request函数里，函数是在按钮点击时才执行的——这时候页面已经完全加载，DOM元素都存在了，所以能正常获取文本框的value。

如果想在全局作用域提前获取DOM元素的值，有两种常见方式：

• 把脚本放在HTML的<body>末尾，确保DOM元素都加载完成后再执行JS代码
• 监听DOMContentLoaded事件，在DOM加载完成后再执行获取元素的逻辑，示例代码：

var animal = "Platypus";
var input, click_button, textbox_response;

document.addEventListener('DOMContentLoaded', function() {
  input = document.getElementsByClassName("textbox_properties");
  click_button = document.getElementsByClassName("button_properties");
  textbox_response = input[0].value;
});

function verify_request() {
  alert(animal);
  alert(textbox_response);
}

内容的提问来源于stack exchange，提问作者Klaxxon