ES6 模块“Uncaught ReferenceError:函数未在 HTMLButtonElement.onclick 处定义”[重复]

2023-11-22

我正在谷歌浏览器中尝试 ES6 模块。当我单击按钮时,我想启动一个alert()(在导入的函数中)。

js/notification.js 加载良好,但是当我单击按钮时出现错误:

未捕获的引用错误:createNotification 未定义 at HTMLButtonElement.onclick ((index):24)

索引.html

<head>
    <script type="module" src="js/main.js"></script>
</head>
<body>
    <section id="container">
       <button type="error" onclick="createNotification()">Create</button>
    </section>
</body>

js/main.js

import {createNotification} from './notification.js';

js/notification.js

export function createNotification(type){
    alert();
}

使用的函数onxyz-attribute-style 处理程序必须是全局的(这是不使用它们的众多原因之一)。您的函数不是全局函数,它是您导入它的模块的本地函数。 (记住:你的主脚本也是一个模块;如果不是,你就不能使用import in it.)

你可以通过分配给一个全局的window财产:

window.createNotification = createNotification;

但这会是much更好地使用现代事件处理:

document.querySelector("#container button").addEventListener("click", createNotification);

plnkr 上的实例,显然只适用于具有模块支持的尖端浏览器。


旁注:如安德烈亚斯指出, type="error"无效于button元素。有效类型是button, submit, or reset, with submit是默认值。 (我已将其更改为button在 plnkr 中。)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ES6 模块“Uncaught ReferenceError:函数未在 HTMLButtonElement.onclick 处定义”[重复] 的相关文章

随机推荐

  • 将 Unix 时间戳转换为无时区时间戳

    如何将 Unix 时间戳 或纪元时间 转换为 PostgreSQLtimestamp without time zone 例如 1481294792应该转换为2016 12 09 14 46 32 I tried SELECT to tim
  • Ruby:比较级之间有什么区别:“||”和“或”[重复]

    这个问题在这里已经有答案了 可能的重复 Ruby 之间的区别和 或 使用红宝石 and or 是非常常见的做法 因此了解两者之间的区别很重要 因为不幸的是我不确定 首先我的问题是以下假设是否正确 EX1 if variable 1 vari
  • 返回值 javascript UIWebView

    我正在尝试获取 javascript 函数的返回值 例如 return hello 与 iPhone SDK 在 OS X 上的 WebView 方法 stringByEvaluatingJavaScriptFromString返回一个包含
  • Swagger UI 显示驼峰命名法参数而不是 PascalCase

    我在 Asp Net Core 3 1 API 中使用 NewtonSoft json 和 Swashbuckle AspNetCore 版本 5 3 3 默认情况下 在 Asp Net Web API 中 2 个输入和输出参数的大小写为
  • 在 C 中为 Fortran 数组分配内存

    我是 Fortran 编程新手 我有一个 3 维数组 声明如下 REAL 4 DIMENSION ALLOCATABLE a1 我想通过引用 C 或 C 函数来传递数组 并在 C 中而不是在 Fortran 中分配内存 是否有可能或者我对
  • Dart 中的 Object 语法意味着什么?

    在下面的代码示例中 从颤振文档 class RandomWords extends StatefulWidget override createState gt RandomWordsState class RandomWordsState
  • 在 WPF 中显示 RichTextBox 中的行号

    我找到了一个例子 如何显示行号RichTextBox在 Windows 窗体中 http www codeproject com Articles 38858 Line Numbers for RichText Control in C 有
  • R Shiny 中的环境

    At http shiny rstudio com articles scoping html闪亮范围的规则得到了很好的解释 有 3 个相互嵌套的环境或级别 函数内 会话内和所有会话内可用的对象 使用 如果我在会话中定义变量但想在函数中更改
  • 登录后重新加载 AntiForgeryToken

    在同一页面的另一个视图中成功登录后 我需要在视图中的表单中重新加载 AntiForgeryToken 我可以通过 jQuery 使用结果登录页面中的新密钥在表单输入 Html AntiForgeryToken 密钥中进行更新吗 如果是 这是
  • 用于 SRT 字幕的 Java API [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 有没有SRT字幕的Java API 实际的SRT解析是通过Java能够操作的正则表达式来执行的 实际的正则表达式是 protected static
  • 使用 allauth 绕过注册表单

    有谁知道在 django allauth 中使用社交帐户时如何绕过注册页面 我已经与 Google 合作进行身份验证 但是当用户接受 Google 的请求时 它会重定向到一个页面 要求他们输入电子邮件地址 然后才能登录 但它肯定会从 Goo
  • SqlCommand.Prepare 方法要求所有参数都具有显式设置的类型

    我的 WCF Web 服务中有以下代码片段 它根据提供的字典值的格式构建一组 where 条件 public static Dictionary
  • SQL Server CLR 线程

    我一直在与 SQL Server CLR 存储过程作斗争 背景 我们使用的是 SQL Server 2014 并且已经实现了一个 CLR 存储过程来调用客户的 Web 服务 线程最初用于不减慢 SQL Server CLR 主线程的速度 尽
  • Django 中的长轮询

    我在 Django 应用程序中使用一种长轮询 以便在操作进行时向客户端返回有关长操作的状态消息 我通过在视图函数中返回一个 HttpResponse 对象来实现此目的 该对象是使用返回字符串的迭代器初始化的 这一切都很好 但是迭代器函数变得
  • mongodb通过多个数组项查找

    如果我有这样的记录 text text goes here words text goes here 如何在 MongoDB 中匹配多个单词 当匹配单个单词时我可以这样做 db find words text 但是当我尝试对多个单词执行此操
  • 仅在与类的其他对象进行比较时,是否有任何理由不将运算符==重载为成员?

    我一直在互联网上寻找答案 但找不到任何答案 给出的唯一原因似乎与不同类型的对象进行比较有关 例如MyClass int 但最常见的用例是将类实例与同一类的另一个实例进行比较 而不是与任何不相关的类型进行比较 换句话说 我确实理解以下问题 s
  • 如何列出数据存储中的种类?

    我只需要为我自己的应用程序解决这个问题 因此在这里重新发布答案 自从提出这个问题并得到回答以来 时间已经过去了 现在有一个更简单的方法 See http code google com appengine docs python datas
  • 如何在 Rust 中注释空切片的类型? [复制]

    这个问题在这里已经有答案了 假设我想比较Vec
  • RealmObject 和 Parcelable

    使用 Realm for Android 我有一堂课 public class Entry extends RealmObject implements Parcelable Parcelable接口包含类似的方法describeConte
  • ES6 模块“Uncaught ReferenceError:函数未在 HTMLButtonElement.onclick 处定义”[重复]

    这个问题在这里已经有答案了 我正在谷歌浏览器中尝试 ES6 模块 当我单击按钮时 我想启动一个alert 在导入的函数中 js notification js 加载良好 但是当我单击按钮时出现错误 未捕获的引用错误 createNotifi