Функция не работает во второй раз, когда я называю это

Question

это мой код:

 <script language="javascript">
    function refresh() {
        try {
            xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
        xmlhttp.onreadystatechange = triggered;
        xmlhttp.open("GET", "data.php");
        xmlhttp.send(null);
    }

    function triggered() {
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
            document.getElementById("ins").innerHTML = xmlhttp.responseText;
        }
        document.getElementById("loading").style.display = "block";
    }
</script>

<a href="javascript:refresh();">Refresh List</a>

Функции перестают работать во второй раз, когда я его вызываю,

Error: document.getElementById("loading") is null

Очень странно, какое-нибудь исправление для этого?

Answer 1

Возможно ли, что loading является потомком ins и перезаписано triggered()?

Answer 2

Переместить загрузочный div из внешнего блока div:

<div id="loading"></div>  
<div id="ins"></div>  

и измените JavaScript следующим образом:

function triggered() {  
    if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {  
        document.getElementById("ins").innerHTML = xmlhttp.responseText;  
    }  
    document.getElementById("loading").style.display =  
                (xmlhttp.readyState == 4) ? "none" : "block";
}  

Это будет скрывать загрузочный div для вас, когда вы закончите, и будет отображаться снова при следующем вызове этого метода.

Answer 3

Я не эксперт по javascript, но я думаю:

Вызов document.getElementById("loading") не ограничен xmlhttp.readyState==4.

Вызывается для всех состояний готовности от 0 до 4. Если строка

document.getElementById("ins").innerHTML = xmlhttp.responseText;

вносит значительные изменения в страницу (возможно, «убирает» элемент «загрузка»), следующий

document.getElementById("loading").style.display = "block";

приводит к ошибке.