how to have onclick function calling an external module file

Question

I have this code

<div class="signup">
    <h2 class="form-title" id="signup"><span>or</span>Sign up</h2>
    <div class="form-holder">
        <input type="text" class="input" placeholder="Name" />
        <input type="email" class="input" placeholder="Email" />
        <input type="password" class="input" placeholder="Password" />
    </div>
    <button onclick="signup(this)" class="submit-btn">Sign up</button>
</div>
<script type="module" src="/libs/ajax.js"></script>
<script type="module" src="/scripts/login.js"></script>

No from the onclick here, I would like to call a function signup that is inside my login.js file

    import { Ajax } from '../libs/ajax.js'
    let signup = (e) =>{
        console.log(e)
    }

The problem is, I am using type="module" because I would like to import script within that js file. But, by assigning a type module, the function is not found from the html file. If I remove import and remove type="module" it does work.

Is there a way to bind a function from the onclick without assign my function to window. scope ?

don't create let signup, use function signup, functions hoists in javascript, meaning they don't need order of declaration, they are always on top — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Aug 10, 2019 at 7:06
I tried let, I tried function, I tried export function signup they all don't work — Crocsx
– Crocsx, Commented Aug 10, 2019 at 7:07
The HTML5 placeholder attribute is not a substitute for the label element — Quentin
– Quentin, Commented Aug 10, 2019 at 7:19

Quentin · Accepted Answer · 2019-08-10 07:13:40Z

7

Is there a way to bind a function from the onclick without assign my function to window. scope ?

No. Modules have their own scope. They don't create globals unless you do so explicitly.

Better to avoid using intrinsic event attributes in the first place. Bind your event handler from inside the module.

let signup = event => {
    console.log(event.currentTarget);
};
document.querySelector('button').addEventListener("click", signup)

answered Aug 10, 2019 at 7:13

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

kzoeps Over a year ago

why is it better to avoid using intrinsic event attributes? Also I was wondering if the module is big and still hasnt loaded and the button has already been painted how would you handle this?

Collectives™ on Stack Overflow

how to have onclick function calling an external module file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related