Vite + Typescript 无法调用 onClick 函数，未定义

Question

我正在 Vite + Typescript 中开发天气应用程序，没有框架，只是简单的 TS。

我想要每个天气列表项都有删除功能。当我单击删除按钮时，clickedID 会被传递到删除函数，并且该函数会从 savingWeatherList 数组中删除该项目，但是 我收到此错误。

(index):29 Uncaught ReferenceError: deleteItem is not defined
    at HTMLButtonElement.onclick

我的 main.ts 文件中有这个删除功能：

function deleteItem(clickedID: number): void {
  console.log("Item with the id of: " + clickedID + " was clicked!");
  savedWeatherList = savedWeatherList.filter((item) => {
    return item.id !== clickedID;
  });
}

在同一个 main.ts 文件中，我将 onclick 属性添加到将调用该函数的按钮。

const deleteButton: HTMLElement = document.createElement("button");    
deleteButton.setAttribute("onclick", "deleteItem(item.id)");

Html 属性似乎已正确添加。

为什么这个函数没有定义，无法调用？

我的脚本标签位于头部。尝试将其放入体内，但没有帮助。

<script crossorigin src="/src/main.ts" type="module"></script>

Answer 1

使用 addEventListener 而不是内联 onclick 您可以在 main.ts 中以编程方式附加事件处理程序，而不是在 HTML 中设置 onclick 属性：

const deleteButton: HTMLElement = document.createElement("button");
deleteButton.textContent = "Delete";
deleteButton.addEventListener("click", () => deleteItem(item.id));