如何在 es6 模块上调用 function

Question

I have tried so many things but it hasn't worked. I am not using react in this project so not sure how i can call the shoeAlert() function when the button is clicked. PLEASE HELP!!

import '../Nav/nav.styles.scss';

const Nav = () =>  {
    
    function showAlert(e) {
        e.preventDefault();
        console.log("I'm an alert");
    };
   return ( `
        <div class='nav'>
            <div>
                <p>Logo</p>
                <button id='btn' onclick="{this.showAlert}"> Click Me</button>
            </div>
        </div> `);
} 
 
export { Nav };

Answer 1

Instead of returning an HTML string, create and return the parent .nav element. You can attach the listener to the inner button before returning.

const Nav = () => {
    function showAlert(e) {
        e.preventDefault();
        console.log("I'm an alert");
    };
    const nav = document.createElement('div');
    nav.className = 'nav';
    nav.innerHTML = `
        <div>
            <p>Logo</p>
            <button id='btn'> Click Me</button>
        </div>
    `;
    nav.querySelector('button').addEventListener('click', showAlert);
    return nav;
};

Working snippet:

 const Nav = () => { function showAlert(e) { e.preventDefault(); console.log("I'm an alert"); }; const nav = document.createElement('div'); nav.className = 'nav'; nav.innerHTML = ` <div> <p>Logo</p> <button id='btn'> Click Me</button> </div> `; nav.querySelector('button').addEventListener('click', showAlert); return nav; }; const nav = Nav(); document.body.appendChild(nav);

showAlert is also a standalone identifier, not a property of any instance, so you don't want this.showAlert , you just want showAlert .