如何在JavaScript字符串文字中使用`onclick`

Question

Is it possible to use onclick inside of a string literal?

I have a page view like so:

const page = () => {
  const htmlOutput = `
    <button
      onclick="openMessageComposer"
      id="messageCta">Message</button> // Using the id works
  `;
  document.getElementById('app').innerHTML += htmlOutput;
  document.getElementById('messageCta').onclick = () => {
    console.log("openMessageComposer")
  }
}

export default page;

It's being used in a router like so:

import page from './page.js';

window.onload = () => {
  page()
}

which is imported in my index.html file as a module as <script type="module" src="router.js"></script>

This works.

However, I'd like to avoid document.getElementById('messageCta').onclick . Is there a way to use the onclick event instead?

Something like

const openMessageComposer = () => {
  console.log("openMessageComposer")
}

which would exist inside the page component.

Answer 1

You currently have two onclicks: one, in the inline attribute, which tries to reference a global variable named openMessageComposer but then does nothing with it. (your other is your .onclick ) If you want to remove the .onclick , then just make sure the inline handler invokes the openMessageComposer function instead:

onclick="openMessageComposer()"

But inline attributes are generally considered to be pretty poor practice, and can make scripts significantly more difficult to manage, especially in larger codebases - I'd prefer your current method of assigning to the onclick property of the element.

If it's the requirement of adding the id to the appended element that you don't like, then create the element explicitly with createElement instead, so you have a direct reference to it, without giving it an id , and assign to its onclick property:

const page = () => {
  const button = document.createElement('button');
  button.textContent = 'Message';
  button.onclick = openMessageComposer;
  document.getElementById('app').appendChild(button);
};