带有 HTML 的 TS 文件中的 JS function 问题

Question

I am building simple sharepoint webpart and i have a problem with using a function in my main file from other module file.

Part of the file JSFunctions.module.js (file where i create my function):

function getApi(){
  [my code]...
  };
  export { getApi }

Part of the file TestWebpartWebPart.ts (main file with body of my webpart):

import { getApi } from './JSFunctions.module.js';

this.domElement.innerHTML = `
<input type="text" id="userEmailInput"><br><br>
<input type="Button" Value="Przycisk" onClick=${getApi()}><br><br>
<div id="html_BirthdayTable"></div>
  `;

Everythng is fine with html code, but i have problem wih onClick=${getApi()}.

When i type onClick${getApi()} there is error on the page: "Object(...) os not a function"

When i type onClick${getApi} there is no error on the page but after clicking on the button nothing happens and when i inspect the code on the page o can see onclick="undefined"

The same happens when I tried "export function getApi(){}" in the JSFunctions.module.js file

Answer 1

Let's say getApi returns "some_result" for the sake of simplicity. Your html will compile to onClick=some_result . That's not valid html and that won't work as you expect.

What you're trying to do is call getApi on button click. That would better be achieved with something along the lines of

// define getApi in the global scope so it can be referrenced in the DOM
window.getApi = getAPi;
// reference it in the dom
this.domElement.innetHTML = `...<input onclick="getApi">...`

Answer 2

Don't use an inline onclick attribute. Attach an event listener to the button.

this.domElement.innerHTML = `
    <input type="text" id="userEmailInput"><br><br>
    <input type="Button" value="Przycisk"><br><br>
    <div id="html_BirthdayTable"></div>
`;

document.querySelector('button[value="Przycisk"]').addEventListener("click", getApi);