在将 js 文件作为模块导入时，在 html 中使用 function

Question

So, I've seen this question kind of being answert.所以，我看到这个问题有点回答。 However in those cases, the one who asked had type="module" (while importing the javaScript file) and didn't mind to remove it.但是在这些情况下，询问的人有 type="module" （在导入 javaScript 文件时）并且不介意将其删除。 But I need to leave it module since I use import/export in other places.但我需要离开它模块，因为我在其他地方使用导入/导出。 One recommendation was to import the JavaScript file twice, once with type=module and once without.一项建议是导入 JavaScript 文件两次，一次使用 type=module，一次没有。 that disabled my module import.这禁用了我的模块导入。

Is there a way to call a JavaScript function (in an onclick event listener) while importing my file as a 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

Is there a way to call a JavaScript function (in an onclick event listener) while importing my file as a module?有没有办法在将我的文件作为模块导入时调用 JavaScript function （在 onclick 事件侦听器中）？

Yes, but I would suggest that instead, you don't use an HTML onxyz -attribute style event handler.是的，但我建议您不要使用 HTML onxyz -attribute 样式事件处理程序。 Instead, hook it up using modern event handling by doing this in the code that defines the drawAndMove function:相反，通过在定义drawAndMove function 的代码中执行此操作，使用现代事件处理将其连接起来：

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

onxyz -attribute style event handlers have several issues, not least that the functions they call have to be globals (and of course, one of the many good things about modules is that they don't create globals by default). onxyz -attribute 样式事件处理程序有几个问题，尤其是它们调用的函数必须是全局函数（当然，模块的许多优点之一是它们默认不创建全局函数）。 In constrast, using modern event handling works with non-globals.相反，使用现代事件处理与非全局变量一起工作。

But for completeness, to make it work in the way I don't recommend, make drawAndMove a global by assigning it to the window object in the code where it's defined: window.drawAndMove = drawAndMove;但为了完整drawAndMove ，为了使其以我不推荐的方式工作，请在定义它的代码中将 drawAndMove 分配给window object 以使其成为全局： window.drawAndMove = drawAndMove;

But again: I don't recommend doing that.但同样：我不建议这样做。

Side note about your button element:关于您的button元素的旁注：

It's not in a form , so there's no need for it to be a submit button.它不在form中，因此不需要它是提交按钮。 I'd suggest type="button" instead.我建议type="button"代替。
The default for type is already "submit" , so you never need to actually write type="submit" in a button element. 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