JavaScript获取HTML元素字符串返回null问题排查

你遇到的空值问题根本不是document.getElementById()返回null导致的，核心错误有2个：

• 取值属性完全用错：<input>是自闭合表单标签，不存在innerHTML属性，标签内部没有嵌套的文本/子节点，调用.innerHTML只能拿到空字符串。表单输入框的内容必须通过.value属性获取。
• 输入框类型写法非法：你写的type="input"不是HTML标准的input类型，虽然浏览器会兜底渲染为普通文本输入框，但属于不规范写法；另外提交按钮用type="submit"在嵌套表单的场景下会触发页面刷新，建议改为type="button"。

你之前猜测的ID匹配错误、Date函数调用错误都不是核心问题，ID写法完全正确，只要取对value属性，Date可以正常解析你预设的日期字符串格式。

只需要修改两处代码即可正常运行：

1. 修改ChangeDate函数里的取值逻辑，把.innerHTML换成.value，额外增加日期合法性校验，避免用户输入非法格式导致倒计时失效：

function ChangeDate() {
    var inputVal = document.getElementById("targetDate").value;
    alert("当前设置的目标时间：" + inputVal);
    var targetTs = new Date(inputVal).getTime();
    if (!isNaN(targetTs)) {
        countDownDate = targetTs;
    } else {
        alert("日期格式无效，请输入类似「Jan 1, 2090 15:37:25」格式的有效时间");
    }
}

2. 修正HTML里的input标签为规范写法：

<!-- 保留手动输入模式用text类型 -->
<input id="targetDate" type="text" name="date" value="Jan 1, 2090 15:37:25">
<input onclick="ChangeDate()" type="button" value="Change Date">

<!-- 如果想降低用户输入成本，直接替换为原生日期时间选择器，无需手动处理格式
<input id="targetDate" type="datetime-local" name="date" value="2090-01-01T15:37">
-->

• 如果要彻底规避不同浏览器对日期字符串的解析差异，可以把单个输入框拆分为年、月、日、时、分、秒6个独立数字输入框，分别拿到数值后传入new Date(year, month-1, day, hour, minute, second)构造时间对象，兼容性100%。
• 初始倒计时时间可以直接读取输入框的默认value赋值，不用在JS里硬编码，后续修改默认时间只需要改HTML一处即可。

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