value1.length报未定义错误而value2、value3.length无报错，是什么原因？

问题根因 #

该报错的核心原因是 value1 的值为 undefined 或 null，这两类数据类型本身不包含 length 属性，因此访问时会触发未定义报错。
正常场景下输入框元素的 value 属性默认返回空字符串 ''（即使用户未输入任何内容），字符串自带 length 属性不会触发报错。只有当 input1 本身不是有效的输入类DOM元素时，它的 value 才会返回 undefined。其余两个值未触发报错，说明 input2、input3 的元素获取逻辑完全正常，问题仅出在 input1 的获取环节。

排查步骤 #

• 检查input1元素的获取代码：核对元素ID拼写是否和HTML一致、选择器语法是否存在错误、是否在DOM渲染完成前就执行了元素获取逻辑（例如将JS代码写在<head>标签内且未添加DOMContentLoaded监听）
• 确认HTML中input1对应的标签是合法输入类元素（<input>/<textarea>等），避免普通容器元素误用input1作为ID
• 在var value1 = input1.value;前插入console.log(input1)，查看控制台输出是否为预期的输入框元素，确认是否存在元素获取失败的问题

兼容优化方案 #

你可以对取值逻辑加兜底处理，避免后续再出现同类报错：

// ES6+ 环境写法，兜底为空字符串
var value1 = input1?.value ?? '';

// 低版本浏览器兼容写法
var value1 = (input1 && input1.value) || '';

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