代码简化为两个函数后JS输入功能失效，寻求排查方案

问题背景 #

未封装inputLength和createListElement函数时，购物清单的输入添加功能正常；将逻辑封装到这两个函数后，点击Enter按钮或按回车键添加条目功能完全失效，浏览器控制台无任何报错信息。

错误原因分析 #

代码存在两个核心问题：

• 函数调用错误：inputLength是返回输入框内容长度的函数，但判断条件中直接写inputLength > 0，这里引用的是函数本身而非调用函数返回的数值。函数对象与数字0比较时会被转换为NaN，NaN > 0结果永远为false，导致条件无法成立，触发不了createListElement。
• 事件参数未声明：keydown事件处理函数中直接使用event变量，但未将其作为参数传入。尽管部分浏览器支持全局event对象，但这不符合标准写法，可能导致事件对象无法正常获取。

修正后的代码 #

JavaScript 代码 #

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
}

button.addEventListener("click", function () {
    // 调用inputLength函数获取长度值
    if (inputLength() > 0) {
        createListElement();
    }
})

input.addEventListener("keydown", function (event) {
    // 声明event参数，确保正常获取事件对象
    if (inputLength() > 0 && event.key === "Enter") {
        createListElement();
    }
})

HTML 代码（无需修改） #

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

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