從外部 HTML 文件調用 javascript function

Question

I have made a function inside a separate file from my HTML, I want to call that function when my select value changes, which it does, but it says the function is not defined. 從這個錯誤：

Uncaught ReferenceError: filterByClass is not defined at HTMLSelectElement.onchange (questions:149)

這是我的 HTML 進行呼叫的地方：

<select id="filter" onchange="filterByClass();">
    <option value="{}">{}</option>
</select>

選項無關緊要。

這是我在單獨文件中的javascript ：

function filterByClass() {
    const sqlite3 = require('sqlite3').verbose();
    var db = new sqlite3.Database("../sql/homework.db");
    var classId = [];

    db.all("SELECT * FROM class WHERE className = ?", [document.getElementById("filter").value], (err, row) => {
        row.foreach(function (row) {
        classId.push(row.id);
            var questionId = document.getElementsByClassName("question");
            if(row.id != document.getElementById(row.id)) {
                document.getElementById("filter").style.display = "none";
            }
        });
    });

    db.close();
}

我知道我的代碼可能不正確，但那是因為我仍在學習 javascript。

另外，我使用browserify來使用 require，並將其轉換為bundle.js 。 這是bundle.js的頭鏈接： <script src="bundle.js" type="text/javascript"></script> 。

順便說一句，這是我第一次在單獨的文件中使用 javascript，因為我通常只是將代碼直接放在頭部。

Answer 1

我有一段時間沒有使用 browserify，但它肯定會將您的代碼包裝到 function 中。

由於function filterByClass() {在全局 scope 和onchange="filterByClass();"中不可用僅當filterByClass在全局 scope 中可用時才有效。

您可以在 function filterByClass() {之后編寫window.filterByClass = filterByClass { 然后此錯誤消息很可能消失了，但您應該以這種方式解決問題，但使用addEventListener代替在 Z4C4ZDB5FCA2E78A1C 中設置事件處理程序

但是雖然這可以解決錯誤消息，但仍然不能解決sqlite3無法在瀏覽器中運行的問題。

Answer 2

我假設的是，瀏覽器在解析bundle.js時會遇到錯誤並中止解析它（這更有可能是因為您在客戶端需要 sqlite）。 這就是為什么您不能從 HTML 文件中調用其中定義的 function 的原因。

我建議您檢查控制台，並解決是否顯示任何錯誤或警告。

Answer 3

<select id="filter" onchange="filterByClass">
    <option value="{}">{}</option>
</select>

去掉 filterByClass 上的括號。 如果調用有效，則調用太早。