Problem with JS function in TS file with HTML

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

Nino Filiu · Accepted Answer · 2021-06-08 13:24:40Z

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

answered Jun 8, 2021 at 13:24

Nino Filiu

19k11 gold badges65 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Strixoxo Over a year ago

my getApi function is returning data by document.getElementById('html_BirthdayTable').innerHTML = html_BirthdayTable

Strixoxo Over a year ago

In your method i dont understand where i should put window.getApi = getApi

Jeremy Thille · Accepted Answer · 2021-06-08 13:27:47Z

0

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

answered Jun 8, 2021 at 13:27

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

4 Comments

Strixoxo Over a year ago

So where i need to put document.querySelector('button[value="Przycisk"]').addEventListener("click", getApi)? It look like it should be inside JSFunctions.module.js file but how can i link this two files. I know in normal html site i can type <script scr="file.js"></script> but i don't know where to palce it in sharepoint webpart project

Jeremy Thille Over a year ago

I know absolutely nothing about Sharepoint. Just copy/paste this code. It creates the button in HTML, and then attaches an event listener to it

Strixoxo Over a year ago

Thanks for help :) It finally works for me, my problem with your solution was accidentaly putting document.querySelector... before this.domElement.innerHTML so this was not working for first try and for now i put my function inside file with my html code

Jeremy Thille Over a year ago

Nice, if my solution worked, please don't forget to mark it as accepted :)

Collectives™ on Stack Overflow

Problem with JS function in TS file with HTML

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related