如何调试我的「表单事件练习」程序无法运行的问题？

我按照表单事件练习的要求编写了代码，但程序无法正常运行，需要排查问题。以下是练习要求、相关代码和我的实现：

练习要求 #

现在来练习使用表单和表单事件！index.html已包含一个表单元素，其中有两个输入框，分别用于数量和产品名称。index.html还包含一个空的<ul>，需要向其中添加新的<li>元素。任务需遵循以下步骤：

• 监听表单提交事件
• 表单提交时，阻止默认行为
• 获取数量输入框和产品输入框的值
• 创建一个新的<li>元素，将其文本内容设置为包含表单中的数量和产品名称
• 将新的<li>添加到页面上的<ul>中
• 重置输入框内容

注意事项：

1. Udemy的界面尚不支持部分较新的JS语法，例如.append()，需要使用替代的旧语法才能通过测试。
2. 表单需赋值给名为form的变量才能通过测试，此代码已在app.js中添加。

相关代码 #

index.html #

<!DOCTYPE html>

<head>
    <title>Grocery List</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <h1>Grocery List</h1>
    <form action="/nowhere">
        <label for="item">Enter A Product</label>
        <input type="text" id="product" name="product">
        <label for="item">Enter A Quantity</label>
        <input type="number" id="qty" name="qty">
        <button>Submit</button>
    </form>

    <ul id="list"></ul>
</body>

</html>

我的app.js实现 #

const form = document.querySelector('form');
const qty = document.querySelector('#qty');
const product = document.querySelector('#product');
const list = document.querySelector('#list');

    
form.addEventListener('submit', function (e){
    e.preventDefault();
    const productName = input.value;
    const qtyItem = input.value;
    const li = document.createElement('LI');
    
    li.innerText = product;
    li.innerText = qty;
    list.appendChild(product);
    list.appendChild(qty);
    
});

错误排查与修复方案 #

逐一分析代码中的问题：

1. 未定义input变量：代码中使用input.value获取值，但input从未声明，应该用之前定义的product和qty变量来获取输入值，即product.value和qty.value。
2. 错误覆盖<li>文本内容：连续两次赋值li.innerText，第二次会覆盖第一次，应该把数量和产品名称拼接成字符串赋值，比如li.innerText = ${qty.value} ${product.value}``。
3. 错误添加元素到列表：当前代码把product和qty这两个输入框元素直接添加到<ul>中，而不是添加创建好的<li>元素，应该调用list.appendChild(li)。
4. 未重置输入框内容：完成添加后，需要清空输入框的值，即product.value = ''和qty.value = ''。

修复后的app.js代码：

const form = document.querySelector('form');
const qty = document.querySelector('#qty');
const product = document.querySelector('#product');
const list = document.querySelector('#list');

form.addEventListener('submit', function (e){
    e.preventDefault();
    // 获取输入值
    const productName = product.value;
    const qtyItem = qty.value;
    // 创建li元素并设置文本
    const li = document.createElement('LI');
    li.innerText = `${qtyItem} ${productName}`;
    // 添加到列表
    list.appendChild(li);
    // 重置输入框
    product.value = '';
    qty.value = '';
});

内容的提问来源于stack exchange，提问作者Arash Peer Mohammad