Este es mi archivo JS, es uno de los componentes HTML reutilizables ya que no estoy usando ningún marco. Antes de esto, estoy usando ReactJS, ya que por alguna razón, requería no usar ningún marco para la interfaz.
Mi pregunta es que quiero hacer la función onClick para el botón. Pensé que era lo mismo que usar JSX en ReactJS pero no funciona. Quiero agregar la etiqueta <script> en el HTML innerHTML , pero no creo que sea relevante porque ya es un archivo javascript.
class Header extends HTMLElement { connectedCallback() { this.innerHTML = ` <button onclick="">Try it</button> ` } } customElements.define('main-header', Header);<button onclick="fn()">Try it</button>
O puede escribir código entre comillas directamente:
onclick="console.log('click')"
HolaPz es correcto, pero para demostrar más claramente-
function buttonClicked() { console.log("You son of a gun, you did it"); } class Header extends HTMLElement { connectedCallback() { this.innerHTML = ` <button onclick="buttonClicked()">Try it</button> ` } } customElements.define('main-header', Header);NOTA: cuando se llama a buttonClicked, el contexto "este" se establecerá en el objeto Ventana y solo estarán disponibles las funciones de nivel superior. Dependiendo de cómo desee codificar en el futuro, podría tener sentido usar this.querySelector dentro de la devolución de llamada conectada para obtener una referencia al botón y luego agregarle manualmente una función enlazada o un detector de eventos (a través de addEventListener).