Question

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

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

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

在我的情况下，我在不使用所需回调的情况下调用我的页面（noobish Ctrl-C Ctrl-V样式）。

以下是问题：

我在HTML / Javascript代码中面临一个奇怪的案例。此代码的目的是通过JS函数获取HTML输入（类型文本）的值。

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

在加载div后调用所选代码。

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

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

这是我的JavaScript调用：

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

此代码不起作用。萤火虫发给我：

TypeError：document.getElementById（“listejf”）为null

奇怪的是，如果我通过这样的getElementById拨打alert，我就能使其发挥作用：

    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只是回显输入文本字段并填充值。

Answer 1

“......如果我通过这样的alert调用getelement，我可以使它工作......”

这几乎总意味着您正在制作异步 AJAX请求。

“警报为何能使其正常工作？”

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); } }

Answer 2

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

加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像和子帧都已完成加载。

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

getElementById（）null错误

2 个答案: