Search code examples
javascriptalertgetelementbyidtextinput

getElementById() null error

For those who wants the soluce before the question :

1 ) Don't read an element with getElementById() before it's really created : see windows.onload.

2 ) If you are using XMLHTTPRequest and AJAX stuff, call you're getElementById() , or unlock this function, in the callback ,(xhr_object.readyState == 4 part of your request).

In my case, i call my page without using the desired callback (noobish Ctrl-C Ctrl-V style).

Here was the question :

I'm facing a strange case in a HTML/Javascript code. The aim of this code is to get the value of an HTML input (type text) via a JS function.

The context is that a main HTML page loads my all my JS functions, and loads on demand HTML contents in sub divs via HTTPRequest.

The selected code is called after the divs has been loaded.

Here's the PHP generated Input field that i have to read:

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

Here's my JavaScript call :

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

This code doesn't work. Firebug sends me:

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

The strange thing is that I can make it work if I call the getElementById through an alert like this:

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

The first alert displays null, but the second one "6|7|", as expected.

Now, 2 questions:

  • Why does alert make it work ?
  • How can I make it work without throwing alerts everywhere?

Re-edit, the code was gone :

That's is the main HTML page : 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 looks like that :

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 just echoes the inputtext field with the value filled.

Solution

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

    This almost always means that you're making an asynchronous AJAX request.

    "Why does alert make it work ?"

    What happens is that the alert delays the processing of the next line of code long enough for the response to return.

    Without the alert, the next line of code runs immediately, and the element is not yet available.

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

    This is a very common issue. The solution is that you need to put any code that relies on the response of the XMLHttpRequest request inside a callback to the request.

    So if you're making a request through the native API, you'd add a onreadystatechange callback...

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

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