javascript - how to have onclick function calling an external module file - Stack Overflow

admin管理员组

文章数量:1389897

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 ?

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 ?

• javascript
• html

Share Improve this question Follow edited Aug 10, 2019 at 9:02 user11748261 asked Aug 10, 2019 at 7:03 CrocsxCrocsx 7,6421515 gold badges8686 silver badges178178 bronze badges 3

• 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 Commented Aug 10, 2019 at 7:06
• I tried let, I tried function, I tried export function signup they all don't work – Crocsx Commented Aug 10, 2019 at 7:07
• The HTML5 placeholder attribute is not a substitute for the label element – Quentin Commented Aug 10, 2019 at 7:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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)

本文标签： javascripthow to have onclick function calling an external module fileStack Overflow