I can't call "function" in html onclick, I don't know why. tell me how to call "myfunction" when onclick

function commentHtml(data, commentId, userId) {
  function myfunction() {
    console.log("test");
  }
  const comment_text = document.querySelector(".comment_text");
  const comment = comment_text.value;
  const check = data.author._id === userId;
  if (check) {
    return `
        <div class="comment-detail">
            <div class="comment-nickname">${data.author.name}</div>
            <div class="comment-text">${data.content}</div>
            <button class="comment_delete" data-id = ${commentId} onclick="myfunction()" >x</button>
        </div>`;
  }
  return `
        <div class="comment-detail">
            <div class="comment-nickname">${data.author.name}</div>
            <div class="comment-text">${data.content}</div>
            <button class="comment_delete" onclick="myfunction()" style="display: none;">x</button>
        </div>`;
}