Uncaught ReferenceError: boxChecked не определяется, когда это?

Question

Я продолжаю получать вышеуказанную ошибку как ошибку типа uncaught, говоря, что что-то не является функцией, когда я думаю, что это так.Я опубликую код и укажу, где я ссылаюсь на элементы.Я делаю список Todo, который генерирует элемент todo, флажок и значок удаления.Когда пользователи устанавливают флажок, я хочу, чтобы он применял 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), и это работает.Я действительно не уверен.Любая помощь будет принята с благодарностью!