How can I call a function on es6 module

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 };

https://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function — Nilesh Kant, Feb 06 '21 at 00:02
Is this supposed to be React? You should read up on how JSX syntax works if so. — jonrsharpe, Feb 06 '21 at 00:02
do u know the code you write is using JSX syntax, as you says you are not using react, I am thinking if you are using Vue. Just a reminder, JSX is not understood by browser, and needs to transpile to make it work. So stay away with JSX syntax, and use normal HTML, JS to get the things done — CHANist, Feb 06 '21 at 01:20

CertainPerformance · Accepted Answer · 2021-02-06T00:09:37.757

0

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.

edited Feb 06 '21 at 00:09

answered Feb 06 '21 at 00:03

CertainPerformance

356,069
52
309
320

Thank you!! it worked. Is there another way to do is so that i can export the Nav component in to my index.js file ? – Dave Feb 06 '21 at 00:13
Your existing export code will export the function just fine. – CertainPerformance Feb 06 '21 at 00:14
this is what i have in my index.js import { Nav } from "../src/componentes/Nav/nav.component"; const app = () => { document.getElementById('nav').innerHTML = Nav(); }; app(); When i add the export in the nav after your code it returns [object HTMLDivElement] in the browser – Dave Feb 06 '21 at 00:20
As it says in the answer, you need to use the returned `.nav` element - don't assign the `innerHTML` of the result, use the returned element itself. Append it to whatever container you want it to be in instead. – CertainPerformance Feb 06 '21 at 00:21

How can I call a function on es6 module

1 Answers1