Javascript function 未被識別為 function

Question

當我加載頁面並更改 select 菜單中的選項時，在調試控制台中我收到一條錯誤消息，指出 descrip() 不是 function

<script type="text/javascript">
function descrip(){ 
    var aid = new XMLHttpRequest("GET",document.ads.subject.value,false);  
    var file = "includes/ads/"+aid+".txt";
    document.ads.descrip.write(file);
    return aid;
}
</script>

<form name="ads" method="post" action="scripts/del_advert_script.php">
<label>Advertisements by subject:</label><select name="subject" id="sub" onChange="descrip()">
        //PHP Block that works
    </select>
    <textarea id="descrip" name="description" cols="100" rows="3" readonly="readonly">

    </textarea>
    <br />
    <input type="submit" value="Submit" />
</form>

Answer 1

我在這里看到四個問題：您的XMLHttpRequest ，您將文本寫入<textarea>的方法，獲取當前選擇的<select>值的方法，以及您的 function 與 ID 共享相同的名稱（僅存在問題在 IE 中）。

AJAX 並不能完全按照您上面的方式工作，不幸的是。 相反，您必須跳過一些障礙才能讓請求運行並返回其 responseText。 這是一些示例代碼：

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.onreadystatechange = function () {
    // When the server has returned a response, and it is good, we're ready
    if (xhr.readyState === 4 && xhr.status === 200) {
        // do something with xhr.responseText
    }
};
// Three arguments: type of request, url, and should the request be async
xhr.open("GET", "url here", true);
xhr.send(null);

這是一個非常簡單的例子，但它確實展示了通用概念。 有關 AJAX 的更多信息，請參閱MDC 關於開始 AJAX 的優秀教程。

接下來，在 DOM 中沒有為<textarea> write function。 為了更改 textarea 中的內容，您需要使用它的value屬性：

your_textarea.value = "something here";

或者如果你想 append 新文本到 textarea：

your_textarea.value += "something here";

這將正確插入文本。

第三，您在<select>中確定當前選擇的<option>值的方法也不起作用（不幸的是）。 為了獲取當前選定選項的值，您必須使用<select>的selectedIndex屬性及其options屬性：

your_select.options[your_select.selectedIndex].value;

這將正確返回當前選定選項的值。

最后，這只是 IE 中的一個問題，您的 function 與 ID 具有相同的名稱。 在 IE 中，任何 ID 都被全局定義為 DOM 元素，所以這是一個問題。 因此，只需將函數名稱更改為其他名稱即可緩解該問題。

總而言之，這是我認為有效的代碼（盡管未經測試）：

<script type='text/javascript'>
function select_change() {
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.onreadystatechange = function () {
        // When the server has returned a response, and it is good, we're ready
        if (xhr.readyState === 4 && xhr.status === 200) {
            var file = "includes/ads/" + xhr.responseText + ".txt.";
            document.ads.descrip.value += file;
        }
    };
    // Three arguments: type of request, url, and should the request be async
    xhr.open("GET", 
            document.ads.subject.options[document.ads.subject.selectedIndex].value, 
            true);
    xhr.send(null);
}
</script>

<form name="ads" method="post" action="scripts/del_advert_script.php">
<label>Advertisements by subject:</label><select name="subject" id="sub" onchange="select_change()">
        //PHP Block that works
    </select>
    <textarea id="descrip" name="description" cols="100" rows="3" readonly="readonly">

    </textarea>
    <br />
    <input type="submit" value="Submit" />
</form>

Answer 2

這是一個瘋狂的猜測，因為我絕不是 Javascript 的人，但我想知道給你的 textarea id=descrip （與你的函數同名）是否會混淆解釋器？

Answer 3

在 Internet Explorer 中，元素 id 被定義為window上的常量。 您的 function 與您的元素的 id 命名相同的事實會產生沖突，並且該元素正在獲勝，因此 IE 看到您嘗試調用 textarea 而不是 function。