未捕获的ReferenceError：何时未定义boxChecked？

Question

我不断收到上述错误，这是一个未捕获的类型错误，当我认为某件事不是某种功能时，会说这不是一个函数。我将发布代码，并指出我在哪里引用元素。我正在创建一个待办事项列表，该列表会生成待办事项，一个复选框和一个删除图标。当用户单击复选框时，我希望它将text-decoration: line-through应用于Todo项。我将带有复选框的onclick="boxChecked"()添加到了输入中，并立即在函数中引用了它。它在我的HTML中一直说没有定义。这是因为所有JavaScript都在外部引用HTML文档吗？也许我在错误的位置具有该功能？

这是控制台日志

function show() {
  var todos = get_todos();

  var html = "<ul>";
  for (var i = 0; i < todos.length; i++) {
    html +=
      '<li class="todo-item">' +
      '<span class="todo-label">' +
      todos[i] +
      "</span>" +
      /*Here is the onclick--->*/ '<input onclick="boxChecked()" class="checkBox" type="checkbox">' +
      '<button class="remove" id="' +
      i +
      '">' +
      '<i class="fa fa-trash" aria-hidden="true"></i>' +
      "</button>" +
      "</li>";
  }
  html += "</ul>";
  document.getElementById("todos").innerHTML = html;

  var buttons = document.getElementsByClassName("remove");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", remove);
  }

  /*Here is the function for it---->*/ function boxChecked() {
    var x = document.getElementByClassName("todo-item");
    if (x.style.textDecoration === "none") {
      x.style.textDecoration = "line-through";
    } else {
      x.style.textDecoration = "none";
    }
  }
}

document.getElementById("add").addEventListener("click", add);
show();

下面是来自 w3schools 的图像，在这里我在一页上尝试了所有图像（没有通过外部JavaScript文件进行引用），并且可以正常工作。我真的不确定。任何帮助将不胜感激！