CODEWITHSUNDEEP
javascripthtmltypescript
Strixoxo
Strixoxo

Reputation: 11

Problem with JS function in TS file with HTML

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

Upvotes: 1

Views: 86

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26380

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);

Upvotes: 0

Nino Filiu
Nino Filiu

Reputation: 18493

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">...`

Upvotes: 1

Related Questions