0

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>
        `
        )
};
2

3 Answers 3

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.

5
  • i want to add listnener inside this component. Or i can't? There is only one way? Feb 7, 2021 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 7, 2021 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 7, 2021 at 20:31
  • I added my idea to the response.
    – szatkus
    Feb 7, 2021 at 20:36
  • Listener does not work with this approach Feb 8, 2021 at 13:28
0

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.