Javascript间歇性失败，但刷新页面后即可使用

Question

我有JavaScript来显示和隐藏页面的各个部分：

function showCustomer(str) {
    // remove white space from the name entered on the search screen
    str = str.replace(" ", "%20");
    var xmlhttp;

    if (str == "") {
        document.getElementById("txtHint").innerHTML = "No records found";
        return;
    }

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "get_customer.asp?q=" + str, true);
    xmlhttp.send();
}

function enable_submit() {
    document.getElementById("id_simplesearch_submit").style.visibility = "visible";
    document.getElementById("autocomplete-search").reset();
    document.getElementById("txtHint").style.display = "none";
    document.getElementById("results").style.visibility = "visible";
}
function disable_submit() {
    document.getElementById("id_simplesearch_submit").style.visibility = "hidden";
    document.getElementById("id_simplesearch").reset();
    document.getElementById("txtHint").style.visibility = "visible";
    document.getElementById("results").style.display = "none";
}

我有一个文本框

onkeyup="showCustomer(this.value)" 

和

onfocus="disable_submit()"

并定义为

    <div class="commandspace">
    <form id="id_simplesearch" name="simplesearch" method="post" action="index.asp">
    <div class="simplesearch"><label for="forename">Forename</label><input type="text" id="id_forename" name="forename" onfocus="enable_submit()" /></div>

    <div class="simplesearch"><label for="surname">Surname</label><input type="text" id="id_surname" name="surname" onfocus="enable_submit()" /></div>
    <div class="simplesearch"><label for="unit">Unit/Team</label><input type="text" id="id_unit" name="unit" onfocus="enable_submit()" /></div>

    <div id="simplesearchsubmit">
    <div class="simplesearch">
    <input class="simplesearchsubmit" type="submit" id="id_simplesearch_submit" name="search" value="Search" />

首次加载页面并开始在showCustomer搜索框中键入内容时，txtHint元素将显示并开始向后拉数据。 但是，如果我单击三个simplesearch框之一，然后再单击showCustomer搜索框，则txtHint根本不会显示。

Answer 1

问题在这里（请参阅注释以获取答案）：

function enable_submit() {
    document.getElementById("id_simplesearch_submit").style.visibility = "visible";
    document.getElementById("autocomplete-search").reset();
    document.getElementById("txtHint").style.display = "none"; // <----- This uses display
    document.getElementById("results").style.visibility = "visible";
}
function disable_submit() {
    document.getElementById("id_simplesearch_submit").style.visibility = "hidden";
    document.getElementById("id_simplesearch").reset();
    document.getElementById("txtHint").style.visibility = "visible"; // <----- This uses visibility
    document.getElementById("txtHint").style.display = "block"; // <----- This line should fix your problems.
    document.getElementById("results").style.display = "none";
}   

因此， enable_submit使用display隐藏该元素。 当disable_submit尝试使用可见性显示它时。 这两个样式属性不匹配。