Use imported javascript function in HTML

Question

What i'm trying to do is have a button that, when clicked, calls an ajax function that will add an element to the document. I started using modules in my project because I find it "cleaner" than just have files using the same scope, but i have a hard time understanding how some things works.

So I have something like this:

html:

<button onclick="addEvent(this, dayPlanningId)"><span class="plusButton">+</span></button>

<script type="module" src="main.js">

main.js:

import * as Ajax from "./ajax.js";
 // Some stuff

ajax.js:

export function addEvent(addButton, dayPlanningId)
{
 // Some ajax stuff
}

So I try to use the function "addEvent" which is exported from "ajax.js", that I have imported in "main.js" which is itself imported in my HTML. When I try and click on my button, I get the following error

Uncaught ReferenceError: addEvent is not defined

I tried to call "addEvent" using "Ajax.addEvent" as I store the imported function in an object called "Ajax" (from what I understood from the javascript documentation on import/export), but I got

Uncaught ReferenceError: Ajax is not defined

I tried re-exporting the ajax function with

export * as Ajax from "./ajax.js";

but it didn't work either using both of the previous syntax...

I'm short on idea, so anyone knows if what i'm trying to do is possible? Or I am just going the wrong way and there is an other way around to do the same thing?

EDIT: I know my code arrangement might not be optimal, but it is just a personnal project so it doesn't really matter

So if anyone stumble upon my post rather than the duplicate, the best answer I found so far is that I have to attach an event listener to my button from my main.js. This file imports my ajax function, so it will be useable in its scope only.

Well, you're writing `onclick="addEvent()"` just _before_ importing the script and declaring the addEvent function — Jeremy Thille, Mar 02 '20 at 16:07
@JeremyThille — That's irrelevent. The variable name isn't evaluated until the click event occurs. — Quentin, Mar 02 '20 at 16:08
@phuzi — It is loaded beforehand. (Because the thing it has to be "before" is the click event) — Quentin, Mar 02 '20 at 16:09
Since you're loading main.js after the HTML, it won't find it. Try moving the script tag above into the or even better, leave it where it is, remove onclick from the DOM node and add the event listener to it in the JS — Shaun E. Tobias, Mar 02 '20 at 16:09
@ShaunE.Tobias — No. It doesn't matter that the script is loaded after the HTML, just so long as it is loaded before the **click**. — Quentin, Mar 02 '20 at 16:10

Use imported javascript function in HTML

0 Answers0