单击按钮时如何从HTML调用导出的函数？

Question

simple webpack setup. index.html and index.js files. In HTML is button onclick="ok_click()". Why can I not call the ok_click function that is defined in the index.js file? I get function not found error.

I tried to export the ok_click function from index.js. Then in index.html, inside script tag, import from index.js. Get error saying the import statement is not recognized.

in index.html

  <button onclick="ok_click( )">ok</button>

in index.js

function ok_click( )
{
  console.log('in ok_click') ;
}
export { ok_click } ;

Answer 1

I think webpack usually apply the scripts at the end of the HTML file. This would mean that when the button onclick is bound there is in fact no javascript available yet. Have you tried looking at what the generated files look like? And remember to make sure the window is loaded.

Try a different approach like:

Index.js:

function init() {
 var btn = document.getElementById("btn");
     btn.addEventListener("click", () => {
       console.log("in ok_click");
      });
}
window.onload = init;

Index.html

<button id="btn">ok</button>