如何解决内置于 codepen 的 Javascript 在我自己的网站上不起作用
作为学习计划的一部分,我构建了一个简单的随机报价生成器。
在 codepen.io 上,我的代码运行良好。我在 javascript (jQuery) 中构建了一个(和简单的)函数,该函数在预定义的 html 元素中与作者一起呈现随机引用(存储在数组中)。
然后我确保我的函数会在页面加载时运行,也会在按钮被点击时运行。
这是我项目的codepen.io页面,功能齐全 https://codepen.io/empathies/pen/NWRvXKK
这是我放在网上的页面的链接 http://empathies.eu/FreeCodeCamp/random-quote-generator.html
当页面加载时会显示随机引用,证明我的 html 页面可以访问我的 Javascript 文件(在不同的文件夹中),但是当我点击页面上的按钮时没有任何反应。
这是我的 .js 文件的内容(我的“quotes”数组的声明就在文件的上方)
const generateQuote = function() {
let random = Math.floor(Math.random() * quotes.length);
$("#text").fadeOut(function () {$('#text').text(quotes[random][0])}).fadeIn();
$("#author").fadeOut(function () {$('#author').text(quotes[random][1])}).fadeIn();
}
$(document).ready(generateQuote);
$("#new-quote").click(generateQuote);
文档就绪行被执行,但点击事件被完全忽略。
谁能帮我解开这个谜团?
解决方法
感谢评论发现我的错误。 我链接到我的 .js 文件在我的 html 页面顶部,这意味着在我的页面中出现按钮之前加载了脚本。
我将链接移到了页面底部,这意味着它是在我的按钮元素创建后加载的。 现在它完美运行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。