Javascript - 事件监听器无法在外部 js 文件中工作

2023-12-08

我试图删除 html 中的 onClick 标签,并将 EventListener 添加到我的外部 js 文件中,但似乎无法让它工作。

以下行有效:

<input type="text" name="text" id="test">
<input type="submit" name="send" value="Skicka" id="klick" onclick="skriv()">

当删除 onclick 并将以下内容添加到我的 javascript 时,它不会:

document.getElementById("klick").addEventListener("click", skriv);

function skriv() {

    var input = document.getElementById("test").value;
    alert("Hello" + " " + input);

}

整个html:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="hello.css">
    <title>
        Multimedia
    </title>
    </head>
    <body>
        <script type="text/javascript" src="hello.js"></script>
        <div>
            <form>
                <p>Skriv ditt namn:</p><br>
                <input type="text" name="text" id="test">
                <input type="submit" name="send" value="Skicka" id="klick">
            </form>
            <p class="lol">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do"`enter code here`
            </p>
        </div>
    </body>
</html>

你缺少 window.onload、checkout带有单独 script.js 文件的演示

window.onload = function () {
  var buttonElement = document.getElementById("klick");
  var inputElement = document.getElementById('test');


  if (buttonElement) {
    buttonElement.addEventListener('click', skriv);
  }

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

Javascript - 事件监听器无法在外部 js 文件中工作 的相关文章

  • 命名和配置jsfiddle

    对于任何知道答案的人来说 这听起来都是一个非常愚蠢的问题 当我创建 JSfiddle 时 它 会出现在我的列表页面上 如下所示 cGzCe Revision 8 然后我将其命名为 多创建节点 由于添加了修订号 因此该短语中没有空格 所以有额
  • Bootstrap 按钮的检查状态

    我想在 Bootstrap 3 0 2 中设置组复选框的选中状态 docs http getbootstrap com javascript buttons html div class btn group div
  • 嵌套 .ajax() 调用的 JavaScript/jQuery 变量作用域问题

    我很难传递变量postData这是一个嵌套子级的序列化 jQuery 数组对象 ajax call postData成功传递给第一个 ajax 打电话 但是当我尝试在第二次使用它时 ajax 调用时 它不会发布任何表单元素 因为变量在该级别
  • 如何在 contenteditable 中跟踪插入符/光标?

    我想在 contenteditable 中跟踪插入符 光标的移动 不过 我不确定最好的方法是什么 我目前正在监听点击 按下键盘 按下键盘的声音 当然 像箭头键或 ctrl x 这样的按键甚至不会触发 虽然 click 工作正常 但 keyd
  • 如何提取 Backbone 集合的属性

    我想从 Backbone 集合创建一个特定属性值的数组 var days select this collection models function model return model attributes type session d
  • 与拉斐尔的路径位置

    我如何使用 raphael js 更改路径位置 很奇怪的是 明显的方法不起作用 var p paper path some path string p attr fill red p attr x 200 y 100 not working
  • 是否有正确的方法将自定义 Javascript 添加到 ASP.NET MVC 5 页面?

    目前 我已将 jQuery 源文件添加到 ASP NET 项目的 Scripts 文件夹中 在 Layout cshtml 页面中 我包含了 Scripts jquery 2 1 1 min js 现在 我可以在我制作的每个页面上包含 jQ
  • div 准备好后如何调用函数?

    我的 javascript 文件中有以下内容 var divId divIDer jQuery divId ready function createGrid Adds a grid to the html html 看起来像这样 div
  • 如何使用 JavaScript 或 jQuery 清除 Google Chrome、Mozilla Firefox 和 Safari 中的剪贴板数据

    我正在开发一个网站 我想在使用 JavaScript 或 jQuery 查看我的网站时按下打印屏幕按钮时清除剪贴板数据 谁能帮我解决这个问题 我在 Internet Explorer 中成功处理了这个问题 提前致谢 由于安全原因 您无法使用
  • ES6 在defineAsyncComponent 中命名导入

    我想异步加载我的网络应用程序的一些元素 这是旧的导入 import Popover PopoverButton PopoverPanel from headlessui vue export default components Popov
  • Nightmare.js 截图缓冲区长度 0

    我正在运行一个 night js 脚本 我试图在其中截取页面上多个元素的屏幕截图 The first元素被捕获得很好 但折叠下方的所有其他元素都以零长度捕获 我正在努力调试这个问题 任何帮助将非常感激 基本上这个脚本会遍历一个页面并选择al
  • innerText 和 html 之间的区别

    有什么区别innerText text and html innerText or text http docs jquery com Attributes text如果您使用的是 jQuery 不包含任何 HTML 标签 因此 如果您有一
  • 对 UPDATE 行的 POST 请求

    我是 javascript 的新手 所以我正在寻找一些帮助来创建一种拖放地理编码标记的方法 以允许交互式更改地址 我相信通过更新 LOCATION 列行可以实现这一点 第一步是 发送 POST 请求 对吧 好吧 所以我想问是否有人可以给我看
  • 为什么使用 MarkForCheck() 和 setTimeout?

    我对 ChangeDetectorRef 中的 MarkForCheck 方法有疑问 对于一种用法我必须使用this cd markForCheck 因为在控制台中我获取了值 但它没有在视图上更新 setTimeout gt this ch
  • 防止 Firefox Web 通知自动关闭

    我已经在 Firefox 中将 Web 通知与服务器发送的 DOM 事件结合使用 不幸的是 通知在大约两到三秒后消失 我更喜欢 Chrome 的方法 即让消息保持可见 在任何给定时间最多显示三个 直到用户单击通知 这是我所拥有的 windo
  • 为什么间接更改复选框时不会触发复选框上的 onchange

    我使用 Prototype 来监视复选框 因此我可以向它们添加 javascript 检查 当单击复选框所在的 tr 或 td 时 应选中该复选框 当您直接单击复选框时 会触发 onchange 事件 因此您会收到警报 当 javascri
  • Web API 2.0 使用 pascalcase 模型接收驼峰式命名的 JSON 数据

    我正在尝试对我的 Web API 进行 PUT 调用 我在 WebApiConfig cs 中设置了以下内容 以处理以驼峰形式将数据发送回我的 Web 项目 config Formatters JsonFormatter Serialize
  • Tizen SDK:找不到变量:tizen

    我正在尝试使用 Tizen SDK 创建一个 Web 应用程序 当我启动应用程序时 一切都很好 但是当我在模拟器上按 后退 按钮时 没有任何反应 并且我看到一条消息 55435 js main js 9 ReferenceError 找不到
  • iOS 上 Safari 中的 shift 键

    有没有办法在javascript中判断手机键盘上是否按下了shift键 并将其与大写锁定 按两次shift键 区分开来 一些事实 首先 让我们看一下有关 iOS 键盘的一些事实 我假设您已经知道了 当您进入键盘模式时 shift键始终处于激
  • 阻止 Chrome 扩展程序的 popup.html 自动打开

    我正在创建一个 Chrome 扩展程序 其中包含background html每分钟从 API 请求一次信息的文件 收到信息后 它会发送消息popup html弹出窗口使用 JSON 信息将新的 HTML 元素附加到弹出窗口的主体上 问题是

随机推荐

  • boost::需要 RTTI 吗?

    在 Boost 网站上 我没有找到有关 boost any 的使用或 RTTI 的信息 我在一些地方读到这是一个要求 但后来我构建了一个简单的测试项目 并且它可以在使用和不使用 RTTI 的情况下构建 那么 由于 RTTI 的性能和内存问题
  • 如何在渐变形状上获得色标?编程语言

    如何在形状上获得色标 我正在创建一个树流程图 我想给它们一个渐变 我还想按百分比更改渐变 所以我希望一个节点的两个颜色停止点都为 50 所以到目前为止我所拥有的给出渐变图案的代码是 QNode Shapes 1 Fill TwoColorG
  • PHP 会话在服务器中不起作用

    我正在用 php 设计一个网站 完成后我将内容上传到服务器中 该页面在本地主机中运行良好 但上传后 页面甚至无法加载 在每个页面的顶部我都包含一个名为startsession php 的页面 该页面内容如下 session start he
  • 使用 EF Core 级联删除

    我目前在使用 EF Core 时遇到一些问题 我有一些需要删除的数据 并且我正在努力了解 Fluent API 的工作原理 确切地说是关于 OnDelete 功能 考虑经典的博客 帖子场景微软自己的网站 我想知道什么实体 到底是OnDele
  • ajax调用jquery函数后无法正常工作

    标题 照片 php cmdclose click function var id this id post cmddel php id id setTimeout function
  • 根据日期范围按日/月/周分组

    这是参考这个question 这是我的数据集 rating 4 ceatedAt ISODate 2016 08 08T15 32 41 262 0000 rating 3 createdAt ISODate 2016 08 08T15 3
  • 将 rvmsudo 与 Capistrano 结合使用

    我正在尝试设置 capistrano 来轻松部署我的 Rails3 应用程序 我对 Rails 还很陌生 除了我试图重新启动独立的乘客服务器之外 一切都正常工作 我在同一台服务器上运行redmine 所以我遵循http blog phusi
  • 如何在 C++ Autotools 项目中禁用 C 编译器

    我正处于向 C 库添加 Autotools 支持的早期阶段 此时我正在跑步autoreconf具有以下配置 cat Makefile am AUTOMAKE OPTIONS foreign bin PROGRAMS cryptest cat
  • jQuery Draggable 到基于 iFrame 的 Sortable 的偏移问题

    我在解决与将可拖动元素放入 iFrame 内的可排序区域相关的偏移问题时遇到了很多麻烦 下面的倾斜示例来演示该问题here 确保窗口相当窄 否则很难将元素放入 iFrame 中 很明显 您不能拖动该项目并将其放在指定位置 而是必须将其拖动到
  • SQL LIKE 查询失败 - 准备好的语句中出现致命错误

    我有以下代码 countQuery SELECT ARTICLE NO FROM WHERE upper ARTICLE NAME LIKE if numRecords con gt prepare countQuery numRecord
  • 实体框架支持多线程吗?

    我正在编写一个针对实体框架 6 1 3 的 C NET4 5 控制台应用程序 我使用工作单元范例如下 public class UnitOfWork IUnitOfWork IDisposable private readonly Data
  • cordova平台添加android在JAVA_HOME中出现错误

    我刚刚在 Windows 8 中安装了 cordova 3 3 当我使用命令 cordova platform add android 时 我收到此错误消息 Error failed to run java version make sur
  • Scala slick 2.0 updateAll 相当于 insertALL?

    寻找一种使用 slick 进行批量更新的方法 是否有与 insertALL 等效的 updateAll 到目前为止 古尔的研究让我失败了 我有一个具有不同状态的案例类别列表 每个都有不同的数值 因此我无法运行典型的更新查询 同时 我想保存多
  • 如果 VBA 中出现错误?

    是否可以在 VBA 中使用具有与 Iferror value value if error 或 Iserror value 类似功能的东西 我试着写 If IsError Cells i c curr Then CODE BLOCK 1 e
  • 使用database/sql时如何获取返回的行数?

    给定以下函数 func me OrderService GetOrders orderTx sql Tx orderId int orders sql Rows orders err ecommTx Query SELECT FROM or
  • 如何为nginx配置pem文件?

    我有3个文件 添加信任外部CARoot crt COMODORSAAddTrustCA crt COMODORSADomainValidationSecureServerCA crt 还有一个密钥库 如何创建 pem 文件 我试图将其内容放
  • 警告消息“newdata”有 1 行,但在 R 中找到的变量有 16 行

    我应该使用预测函数来预测何时fjbjor是 5 5 我总是收到此警告消息 我尝试了很多方法 但它总是出现 所以有人能看到我在这里做错了什么吗 这是我的代码 fit lm lt lm fjbjor amagn data bjor summar
  • 缩放和镜像 SVG 对象

    如何最轻松地首先缩放对象 例如当前大小的 2 倍 然后垂直和水平翻转 或两者都翻转 截至目前 我可以设置 scale 2 2 使其变为宽度和高度的 2 倍 但无法与垂直翻转的scale 1 1 同时翻转它 我正在以编程方式创建 SVG 对象
  • 从 html 源中删除所有换行符

    好吧 我知道混淆是个坏主意 但我希望所有的 html 代码都放在一长行中 所有的html标签都是通过PHP生成的 所以我认为这是可能的 我知道替换 n r来自正则表达式 但不知道如何做到这一点 如果我不清楚 这里有一个例子 output p
  • Javascript - 事件监听器无法在外部 js 文件中工作

    我试图删除 html 中的 onClick 标签 并将 EventListener 添加到我的外部 js 文件中 但似乎无法让它工作 以下行有效