没有被调用的外部JS文件的function

我正在使用webpack和firebase。

我有我的package.json> "start": "webpack-dev-server ./index.js",这一行"start": "webpack-dev-server ./index.js",

在我的index.js文件中我有函数

 logUserIn(){ //does stuff }; 

在我的index.html文件中,我有这一行> <input type="submit" onclick=logUserIn() value="Log in">

当我点击那个button,我得到这个错误> Uncaught ReferenceError: logUserIn is not defined

我的index.html文件> <script src="bundle.js"></script>中也有这一行,它应该链接到包含index.js的包文件是否正确?

最后,我在index.js中写了一个console.log,内容是console.log('hello') ,当我刷新页面时,出现hello,这意味着index.html通过bundle.js调用index.js为什么地球上不会识别我的方法名?

这绝对不是因为我已经复制和粘贴错字

当你使用Webpack的时候,你被认为是使用模块 。 如果你的代码不是以这种方式组织的话,它可能会产生一些问题。

具体到你的问题,你的函数logUserIn()在那里,但它是在一个模块内,这意味着它是一个私人函数。 在全球范围内没有看到,所以你的index.html不能“看”到调用它的函数。

为了使其全局可用,您需要导出该function。

但是,除非你有特定的理由在HTML中使用logUserIn() ,否则我会build议切换你的代码。 通常你想保持你的标记和你的逻辑分开,所以在这种情况下你的代码看起来更像:

使用Javascript

 document.getElementById('loginButton').onclick = logUserIn 

HTML

 <input type="submit" id="loginButton" value="Log in"> 

另外,如果有问题的button是一个表单,则需要用e.preventDefault()覆盖表单的默认function。

我build议直接导入你的JS文件到你的HTML页面,然后检查问题是否解决。 如果没有,请检查控制台上的源代码,检查您的文件是否正确加载。
如果你的文件被加载,但仍然不起作用,请检查您的JS文件的顺序,也许将其移动到顶部。
希望它有帮助!

– Nic