How to run a onClick function inside inner HTML in Class Javascript?

Question

I'm having trouble using Class Javascript. so I want to pass the looped project id. How do I execute onClick with the handleProject function? for test I use alert . The following code produces an "unexpected end of input" error

import axios from "axios";

export class ProjectPanel extends DockingPanel {
  constructor(viewer, container, id, title, options, projects) {
    super(container, id, title, options);
    this.viewer = viewer;
    this.options = options;
    // docking panel
    this.container.classList.add("docking-panel-container-solid-color-a");
    this.container.style.cssText = `
          top: 10px;
          left: 10px;
          width: 300px;
          padding: 10px;
          min-height: 300px;
          resize: auto;
        `;
    this.projects = projects;
    if (this.projects) {
      this.updateProjectList(this.projects);
    }
  }

  updateProjectList(projects) {
    console.log(projects);
    this.containerProject = document.createElement("div");
    this.containerProject.className = "containerProject";
    this.container.append(this.containerProject);
    if (projects) {
      this.containerProject.innerHTML =
        "<div >" +
        projects
          .map((project) => {
            return (
              `<div class='button-bee-project glyphicon glyphicon-triangle-right' onclick=${this.handleProject(project.id)}>` +
              project.name +
              "</div>"
            );
          })
          .join("") +
        "</div>";
    } else {
      this.containerProject.innerHTML = `
         <div>Please Login</div>
          `;
    }
  }

  handleProject(id) {
    alert(`HELLO ${id}`);
  }
}

Answer 1

A simple solution could be to change your structure to append project to the containerProject , instead of setting the innerHTML of containerProject by string you can create DOM element, set element's onclick , and then append it to the containerProject , like below example:

updateProjectList(projects) {
  this.containerProject = document.createElement("div");
  this.containerProject.className = "containerProject";
  this.container.append(this.containerProject);
  if (projects) {
    this.containerProject.innerHTML = '<div></div>';
    const projects = this.containerProject.firstElementChild;
    projects.forEach((project) => {
        const projectEl = document.createElement('div');
        projectEl.innerHTML = project.name;
        projectEl.className = 'button-bee-project glyphicon glyphicon-triangle-right';
        projectEl.onclick = ()=> this.handleProject(project.id);
        projects.append(projectEl);
      });
} else {
  this.containerProject.innerHTML = `
     <div>Please Login</div> `;
  }
}