Uncaught ReferenceError: selectInput未定义的报错排查与解决

报错原因 #

你写的selectInput是displayAllTitles内部的嵌套函数，属于局部作用域。但通过innerHTML生成的<li onclick=selectInput(this)>会在全局作用域里查找这个函数，自然找不到，所以触发未定义错误。

解决方法（推荐事件委托方案） #

放弃给每个li绑定onclick属性，转而给父容器result-box绑定点击事件，利用事件冒泡处理点击逻辑，既避免作用域问题，也更高效。

修改后的JS代码：

function displayAllTitles(availableKeywords, availableKeyTitle) {

  const resultsBox = document.querySelector(".result-box");
  const inputBox = document.getElementById("input-box");

  // 给结果容器绑定点击事件（事件委托）
  resultsBox.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
      inputBox.value = e.target.innerHTML;
      resultsBox.innerHTML = '';
    }
  });

  inputBox.onkeyup = function() {
    let result = [];
    let input = inputBox.value;

    if (input.length) {
      result = availableKeywords.filter((keyword) => {
        return keyword.toLowerCase().includes(input.toLowerCase());
      });
      console.log(result);
    }
    display(result);
  }

  function display(result) {
    // 去掉onclick属性，只生成纯li标签
    const content = result.map((list) => {
      return "<li>" + list + "</li>";
    });
    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
  }
}

另一种可选方案（提升作用域） #

如果坚持保留onclick属性写法，可以把selectInput挂载到全局对象上，但这种方式不如事件委托优雅：

function displayAllTitles(availableKeywords, availableKeyTitle) {

  const resultsBox = document.querySelector(".result-box");
  const inputBox = document.getElementById("input-box");

  // 把selectInput挂载到window上，让全局能访问
  window.selectInput = function(list) {
    inputBox.value = list.innerHTML;
    resultsBox.innerHTML = '';
    // 用完移除，避免全局污染
    delete window.selectInput;
  }

  inputBox.onkeyup = function() {
    let result = [];
    let input = inputBox.value;

    if (input.length) {
      result = availableKeywords.filter((keyword) => {
        return keyword.toLowerCase().includes(input.toLowerCase());
      });
      console.log(result);
    }
    display(result);
  }

  function display(result) {
    const content = result.map((list) => {
      return "<li onclick=selectInput(this)>" + list + "</li>";
    });
    resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
  }
}

HTML代码无需修改，保持原结构即可。

内容的提问来源于stack exchange，提问作者Dhenhice