开发者问题收集

getElementById() 空错误

2012-08-04
5340
javascript alert getelementbyid textinput

对于那些想要在问题之前得到解决方案的人：

1）在元素真正创建之前，不要使用 getElementById() 读取元素：请参阅 windows.onload。

2）如果您使用 XMLHTTPRequest 和 AJAX 内容，请在回调中调用 getElementById() 或解锁此功能（xhr_object.readyState == 4 部分）。

就我而言，我在调用页面时没有使用所需的回调（菜鸟的 Ctrl-C Ctrl-V 样式）。

问题是这样的：

我在 HTML/Javascript 代码中遇到了一个奇怪的情况。此代码的目的是通过 JS 函数获取 HTML 输入（类型文本）的值。

上下文是主 HTML 页面加载我的所有 JS 函数，并通过 HTTPRequest 按需加载子 div 中的 HTML 内容。

加载 div 后调用选定的代码。

这是我必须读取的 PHP 生成的输入字段： 

    <input id="listejf" type="text" value="6|7|">

这是我的 JavaScript 调用： 

    listejf=document.getElementById('listejf').value;
    alert(listejf);

此代码不起作用。 Firebug 向我发送：

TypeError: document.getElementById("listejf") is null

奇怪的是，如果我通过 alert 调用 getElementById ，我可以使其工作，如下所示： 

    alert(document.getElementById("listejf"));
    listejf=document.getElementById('listejf').value;
    alert(listejf);

第一个 alert 显示 null ，但第二个显示“6|7|”，正如预期的那样。

现在，有 2 个问题：

  • 为什么警报会使其工作？
  • 我怎样才能使其工作而不到处抛出警报？

重新编辑，代码不见了：

这是主 HTML 页面：main.html 

<head>
    <script type="application/javascript" src="./preload.js"></script>
</head>
<body>
    <a href="#" onCLick="CallPagen()">Link</a>
    <div id="targetid"></div>
</body>

preload.js 看起来像这样: 

function CallPagen() {
    envoieRequete('./PageN.php', 'targetid');
}

function mytestfunction() {
    listejf = document.getElementById('listejf').value;
    alert(listejf);
}

function envoieRequete(url, id) {
    var xhr_object = null;
    if (window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
    else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    xhr_object.open("GET", url, true);
    xhr_object.onreadystatechange = function () {
        if (xhr_object.readyState == 4) {
            if (!document.getElementById(id)) {
                alert("id pas trouvé " + id);
            }
            document.getElementById(id).innerHTML = xhr_object.responseText;
            mytestfunction();
        }
    };
    xhr_object.send(null);
}

PageN.php 仅回显填充了值的 inputtext 字段。

2个回答

"...I can make it work if i call the getelement through an alert like this..."

这几乎总是意味着您正在发出 异步 AJAX 请求。

"Why does alert make it work ?"

发生的情况是， alert 延迟了下一行代码的处理足够长的时间以使响应返回。

如果没有 alert ，下一行代码将立即运行，并且元素尚不可用。

"How can I make it work without throwing alerts everywhere?"

这是一个 非常 常见的问题。解决方案是，您需要将所有 依赖 XMLHttpRequest 请求响应的代码 放入请求的回调中 。

因此，如果您通过本机 API 发出请求，则需要添加 onreadystatechange 回调... 

xhrRequest.onreadystatechange = function() {
    if (xhrRequest.readyState === 4) {
        // append the response text to the DOM

        listejf=document.getElementById('listejf').value;
        alert(listejf);
    }
}
2012-08-04

您应该在 DOM 准备就绪后运行代码，当调用 alert() 、文档正在加载且浏览器有时间创建 DOM 对象时，请尝试以下操作：

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading. 

window.onload = function() {
    var listejf = document.getElementById('listejf').value;
    alert(listejf);
};
Ram
2012-08-04