getElementById() 空错误答案

【问题标题】：getElementById() null errorgetElementById() 空错误
【发布时间】：2012-08-04 16:12:19
【问题描述】：

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

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

2 ) 如果你使用 XMLHTTPRequest 和 AJAX 的东西，调用你是 getElementById() ，或者解锁这个函数，在回调中，（xhr_object.readyState == 4 部分你的请求）。

在我的情况下，我调用我的页面时不使用所需的回调（noobish 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") 为空

奇怪的是，如果我像这样通过alert 调用getElementById，我可以让它工作：

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

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

现在，两个问题：

为什么 alert 会起作用？
如何在不到处发出警报的情况下使其正常工作？

重新编辑，代码不见了：

这是主要的 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 字段。

【问题讨论】：

确保您的 JavaScript 在页面上的 <input> 元素之后出现，或者它位于“加载”或“就绪”处理程序中。
javascript 代码在我的主页中加载，在元素写入之前，但是这部分代码是在之后调用的。我不了解处理程序 sry。
好吧，您还没有真正发布足够的上下文来使问题变得明显。代码到底是怎么调用的？
@Pointy：xhr 请求很可能是异步的。
@Pointy：是的，需要做一点澄清，但考虑到 OP 正在通过 xhr 加载内容，并且 alert 的存在使其工作，我想说这是关于99% 的机会。

标签： javascript alert getelementbyid textinput

【解决方案1】：

"...如果我像这样通过alert 调用getelement，我可以让它工作..."

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

“为什么 alert 会起作用？”

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

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

“我怎样才能让它在不到处发出警报的情况下工作？”

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

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

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

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

【讨论】：

不，不包括 ajax。只是 DOM 异步的东西
@Bergi：嗯？你怎么知道的？
我以这种方式调用阅读功能，但没有结果 :[ 。 @我不是：我只是在主要问题中添加了一些代码；）谢谢！
这意味着在您的回调中，您正在将新内容添加到 DOM，因此您需要将 getElementById 代码放在同一个回调中。
@encheridion：您是否确认您的回复包含 ID 为 "listejf" 的元素？您的代码中没有任何内容会导致 alert 产生任何影响。您是否发布了给您带来麻烦的原始代码？

【解决方案2】：

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

加载事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有图片和子帧都加载完毕了。

window.onload = function() {
    var listejf = document.getElementById('listejf').value;
    alert(listejf);
};

【讨论】：

看到输入的创建是通过 XMLHttpRequest 进行的，window.onload 似乎没有按预期触发。感谢您的尝试！
@encheridion 欢迎您，因为您使用的是 Ajax，您应该在 ajax 完成后运行代码。