首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何从html页面调用javascript模块(type=module)中声明的函数

如何从html页面调用javascript模块(type=module)中声明的函数
EN

Stack Overflow用户
提问于 2021-11-08 18:07:10
回答 2查看 6.9K关注 0票数 6

我很难使用javascript模块..。

我有一个html文件和一个JS模块。我在javascript文件中定义了一个函数,我想从我的HTML页面调用该函数。这是我的密码

index.html

代码语言:javascript
复制
<html>
<head>
  <script type="module" src="app.js"></script>
</head>
<body>
  <button onclick="greetFromHtml();">greetFromHtml</button>
  <button onclick="greetFromModule()"> greetFromModule</button>
  <script type="text/javascript">
    function greetFromHtml(){
      alert('Hello');
    }
  </script>
</body>
</html>

app.js

代码语言:javascript
复制
function greet(){
  alert('Hello');
}

greetFromHtml按钮工作正常。当我单击greetFromModule按钮时,会得到以下错误:hello is not defined at HTMLButtonElement.onclick

如果我将type="module"从标头中删除,那么所有这些都能正常工作,但是由于其他原因,我需要使用模块,所以这不是一个很好的解决方案。

我见过几个帖子说我需要导入/导出或使用窗口,但我不知道该怎么做。有人能给我一个答案吗?理想情况下,实现这一目标的最简单方法

见下文对我所审查的一些问题的提及:

function in my javascript module is not defined

Call functions in a JavaScript from an HTML

How to use code from script with type=module [duplicate]

ES6 Modules: Undefined onclick function after import

编辑我尝试了以下操作,但仍然得到相同的错误

编辑2答案中的代码正在工作。我只是想在本地运行,但我知道您需要一台服务器,所以如果您看到相同的错误,请将站点上传到服务器或使用本地服务器。

EN

Stack Overflow用户

发布于 2022-10-05 18:56:54

myscript.js

代码语言:javascript
复制
export const sampleFunction=()=>{
alert("Hello I'm sample");

}

index.js

代码语言:javascript
复制
import {sampleFunction} from './myscript.js';
window.sampleFunction=sampleFunction;

index.html

代码语言:javascript
复制
<script type='module' scr='./index.js'></script>
<button onclick="sampleFunction()">Click me</button>

在script标记中,让脚本类型= 'module‘和src = './index.js’。现在它应该起作用了)

票数 1
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69888029

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档