CODEWITHSUNDEEP
javascripthtml
Crocsx
Crocsx

Reputation: 7609

how to have onclick function calling an external module file

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 ?

Upvotes: 5

Views: 3562

Answers (1)

Quentin
Quentin

Reputation: 943537

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)

Upvotes: 7

Related Questions