外部JSファイルの関数が呼び出されていない

Question

webpackとfirebaseを使用しています。

私は<input type="submit" onclick=logUserIn() value="Log in">

>私はこのラインを持って、私は機能私のindex.htmlファイルで

logUserIn(){ 
    //does stuff 
}; 

を持っている私のindex.jsファイルでは>"start": "webpack-dev-server ./index.js",

私のpackage.jsonにこのラインを持っています

このボタンをクリックすると、このエラーが表示されます>Uncaught ReferenceError: logUserIn is not defined

私のindex.htmlファイル> 012にもこの行がありますindex.jsを含むバンドルファイルにリンクする必要がありますか？

最後に、私はconsole.log('hello')というindex.jsにconsole.logを実行しました。このページを更新すると、helloは、index.htmlがbundle.jsを通じてindex.jsを呼び出していることを意味します。私のメソッド名を認識できませんか？

私はコピーして

Answer 1

Webpackを使用すると、modulesが使用されていると見なされます。この方法でコードを整理しないと、いくつかの問題が生じる可能性があります。

あなたの問題に特に関しては、あなたの関数logUserIn()はありますが、それはモジュールの中にあり、それは私的な関数であることを意味します。これはグローバルスコープには見当たらないので、index.htmlはそれを呼び出す関数を「見る」ことができません。

グローバルに利用できるようにするには、関数をエクスポートする必要があります。

ただし、HTMLにlogUserIn()がある特別な理由がない限り、コードを切り替えることをおすすめします。また

Javascriptを

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

HTML

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

場合、：通常は、このケースでは、あなたのコードはより多くのようになりますので、個別のマークアップとあなたのロジックを維持したいです問題のボタンはフォームであるため、フォームのデフォルト機能をe.preventDefault()で上書きする必要があります。

Answer 2

を貼り付けているように、それは私が、問題が解決されるかどうかを確認、その後、あなたのHTMLページに直接あなたのJSファイルをインポートすることをお勧めのいずれか間違いタイプミスではありません。そうでない場合は、ソースの下のコンソールをチェックして、ファイルが正しくロードされているかどうかを確認します。
ファイルがロードされてもまだ動作しない場合は、JSファイルを配置した順番を確認してください。おそらく上に移動してください。
助けてくれることを願っています！

- Nic