在將 js 文件作為模塊導入時，在 html 中使用 function

Question

所以，我看到這個問題有點回答。 但是在這些情況下，詢問的人有 type="module" （在導入 javaScript 文件時）並且不介意將其刪除。 但我需要離開它模塊，因為我在其他地方使用導入/導出。 一項建議是導入 JavaScript 文件兩次，一次使用 type=module，一次沒有。 這禁用了我的模塊導入。

有沒有辦法在將我的文件作為模塊導入時調用 JavaScript function （在 onclick 事件偵聽器中）？

function drawAndMove(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    audi.draw();
    audi.move();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="compare.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <input type="text" value="nix" id="farbId">
    <button type="submit" id="subId" onclick="drawAndMove()">sub</button>

    <main>
        <canvas id="canvas" width="800" height="600">
        </canvas>
    </main> 

</body>
</html>

Answer 1

有沒有辦法在將我的文件作為模塊導入時調用 JavaScript function （在 onclick 事件偵聽器中）？

是的，但我建議您不要使用 HTML onxyz -attribute 樣式事件處理程序。 相反，通過在定義drawAndMove function 的代碼中執行此操作，使用現代事件處理將其連接起來：

document.getElementById("subId").addEventListener("click", drawAndMove);

onxyz -attribute 樣式事件處理程序有幾個問題，尤其是它們調用的函數必須是全局函數（當然，模塊的許多優點之一是它們默認不創建全局函數）。 相反，使用現代事件處理與非全局變量一起工作。

但為了完整drawAndMove ，為了使其以我不推薦的方式工作，請在定義它的代碼中將 drawAndMove 分配給window object 以使其成為全局： window.drawAndMove = drawAndMove;

但同樣：我不建議這樣做。

關於您的button元素的旁注：

它不在form中，因此不需要它是提交按鈕。 我建議type="button"代替。
type的默認值已經是"submit" ，因此您不需要在button元素中實際編寫type="submit" 。

在將 js 文件作為模塊導入時，在 html 中使用 function

問題描述

1 個解決方案

解決方案1
1 已采納 2022-08-01 10:29:02

在將 js 文件作為模塊導入時，在 html 中使用 function

問題描述

1 個解決方案

解決方案1 1 已采納 2022-08-01 10:29:02

解決方案1
1 已采納 2022-08-01 10:29:02