How to add eventListener to elemen in webpack modules

Question

I have javascript application building on modules. I am using webpack. I want to add eventlistener to element. But i can't do it. I receive the error "ReferenceError: x is not defined". Where in my app i should place my eventlistener function. It works if i write function inline, but i don't want to do that.

Here is my app.js file (entry point).

import {Main} from "./components/Main";
import './style.css'

export default (function () {
    document.getElementById("app").innerHTML = Main();
}());

Component with element i want to have eventlistener - onclick in element:

import {CompanyContainer} from "./CompanyContainer";

export const UserContainer = user => {
    return (
        `
        <a href="#" onclick="">${user.getFullName()}</a>
        <div class="user-details hide">
            <p>Birthday: ${user.getBirthDay()}</p>
            <p><img src="" width="100px"></p>
            ${CompanyContainer(user.companyId)}
        </div>
        `
        )
};

What is the listener you're trying to add? – CertainPerformance Feb 07 '21 at 19:49 — CertainPerformance, Feb 07 '21 at 19:49
simple click listener – Дмитрий Каспорский Feb 07 '21 at 20:05 — Дмитрий Каспорский, Feb 07 '21 at 20:05

szatkus · Answer 1 · 2021-02-07T20:35:48.870

1

Quick idea:

const e = document.createElement('div');
e.innerHTML = yourHTMLCode;
e.querySelector('a').addEventListener('click', yourListenerFunction);

Edit: I would rewrite your component in this manner:

import {CompanyContainer} from "./CompanyContainer";

export const UserContainer = (user, onClick) => {
    const html = `
        <a href="#">${user.getFullName()}</a>
        <div class="user-details hide">
            <p>Birthday: ${user.getBirthDay()}</p>
            <p><img src="" width="100px"></p>
            ${CompanyContainer(user.companyId)}
        </div>
        `;
    const element = document.createElement('div');
    element.innerHTML = html;
    element.querySelector('a').addEventListener('click', onClick);
    return element;
};

This way you can pass you listener during container creation.

edited Feb 07 '21 at 20:35

answered Feb 07 '21 at 19:52

szatkus

1,292
6
14

i want to add listnener inside this component. Or i can't? There is only one way? – Дмитрий Каспорский Feb 07 '21 at 20:08
It's not a good idea to pass plain HTML in the first place. Use that code in a component creation and return HTML element with you code inside of it. – szatkus Feb 07 '21 at 20:13
i wrote code inside app.js file and it works fine. But i will have many listeners and it's not a good idead to place them there. – Дмитрий Каспорский Feb 07 '21 at 20:31
I added my idea to the response. – szatkus Feb 07 '21 at 20:36
Listener does not work with this approach – Дмитрий Каспорский Feb 08 '21 at 13:28

score 0 · Answer 2 · answered Feb 07 '21 at 20:45

I edited your code and started a fully functional example at github(https://github.com/lalosh/stackoverflow-webpack-event-listener) you can check it yourself.

notice that you didn't even pass an event handler in your code, but assuming you've passed one like

  function onClickHandler(event){...}

  "<a onclick="onClickHandler(event)"> ....

the onClickHandler won't be called successfully because it's scroped to the file and not to the global object (window)

to fix simply attach the event to the global object window

  window.onClickHandler = function onClickHandler(event){...}

  "<a onclick="onClickHandler(event)"> ....

and note that you can use addEventListener (more preferend)instead of directly attaching the event listener from inside html, I suggest you check the comparison here addEventListener vs onclick

score 0 · Answer 3 · answered Feb 09 '21 at 04:36

0

I decided to rewrite my code and made with document.creatreElement instead of innerHTML. And it works. A little bit more lines of code but works and conceptual right. Thanks for the help.

answered Feb 09 '21 at 04:36

Дмитрий Каспорский

25
7

How to add eventListener to elemen in webpack modules

3 Answers3