Chrome/Firefox中document.getElementById(...)为null，旧IE正常

嘿，我看到你遇到了个挺头疼的兼容问题——你的MoveNext()函数在Chrome和Firefox控制台里报错，但在旧版IE里却能正常工作，而且问题就出在最后一行获取disp元素值的代码上。我来帮你分析下可能的原因和解决办法：

可能的问题根源 #

现代浏览器（Chrome、Firefox）对DOM的处理比旧IE严格得多，这里大概率是两种情况：

• 元素类型不匹配：如果id="disp"的元素不是表单控件（比如是div、span这类文本容器），旧IE会偷偷把元素的文本内容映射到value属性上，但Chrome和Firefox不会这么做，直接取.value就会抛出错误。
• 元素未加载完成：旧IE的DOM加载机制比较宽松，可能在元素还没渲染到页面时就允许脚本访问，但Chrome和Firefox会因为找不到元素返回null，再去取.value自然就报错了。

修复方案 #

针对这两种情况，给你几个可行的解决办法：

1. 针对非表单控件的情况

如果disp是普通文本容器（比如div/span），把.value换成textContent（现代浏览器）或innerText（兼容旧IE）：

// 兼容所有浏览器的写法
var dispElem = document.getElementById("disp");
var time = dispElem.textContent || dispElem.innerText;

2. 确保元素加载完成再访问

如果是元素还没加载就被脚本调用，把你的脚本放在页面底部（</body>标签之前），或者用DOM加载完成事件包裹：

document.addEventListener('DOMContentLoaded', function() {
    // 在这里定义或调用你的MoveNext函数
    function MoveNext() {
        // ... 你的原有代码 ...
        var dispElem = document.getElementById("disp");
        var time = dispElem.textContent || dispElem.innerText;
        // ... 后续代码 ...
    }
});

3. 增加元素存在性判断（更稳妥）

为了避免元素不存在导致的报错，先判断元素是否存在再取值：

var dispElem = document.getElementById("disp");
var time = dispElem ? (dispElem.value || dispElem.textContent || dispElem.innerText) : "";

这样调整后，你的函数应该就能在Chrome、Firefox和旧IE里都正常运行啦。

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