Udemy JS 表单提交练习答案

【问题标题】：Udemy JS form submission exerciseUdemy JS 表单提交练习
【发布时间】：2023-01-28 20:45:26
【问题描述】：

我正在从一位名叫 Colt Steel 的讲师那里学习 Udemy 课程。我坚持创建表单提交。以下是他的指示：

表单事件练习

是时候练习使用表单和表单事件了！ index.html 已经有一个包含两个元素的表单元素，一个用于数量，一个用于产品名称。 index.html 还包含一个空的 ul，您将在其中附加新的 li。

监听表单提交

提交表单时，防止默认行为

抓取数量输入值和产品输入值

创建一个新的 li 元素。将新 li 上的文本设置为包括表单中的数量和产品名称。

将新的 li 附加到页面上的 ul

重置输入

这是 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>

这是我到目前为止所拥有的

const form = document.querySelector('form');
const product = document.querySelector('#list');
form.addEventListener('submit', function(e) {
    e.preventDefault()
    
    const userform = form.elements.userform.value
    const userqty = form.elements.userqty.value
    
    const newForm = document.createElement('li')
    
}) 

**Edit: Here is the gif of what it is supposed to look like when completed**

[enter image description here][1]


  [1]: https://i.stack.imgur.com/rQeMQ.gif

【问题讨论】：

请阐明您的具体问题或提供更多详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
很公平。我的代码是完整的和/或只是错误的。我想要关于我可能会丢失的 const 变量的帮助。或贴错标签。我希望这能澄清我的需求。

标签： javascript html forms dom-events document

【解决方案1】：

这是由于引用了错误的属性名称.与在 HTMl 中一样，对于第一个输入名称论点是产品但在脚本中，你指的是用户表单.

为了向父 ul 创建/添加新项目列表，您必须创建一个新元素并将新的子元素附加到父元素。

const form = document.querySelector('form');
const product = document.querySelector('#list');
form.addEventListener('submit', function(e) {
  e.preventDefault()

  const product = form.elements.product.value;
  const quantity = form.elements.qty.value;

  // Get the Parent ul
  const parentList = document.querySelector('ul#list');
  // Create a new li Element
  let newListItem = document.createElement('li');
  // Create a new TextNode Element to add data and Append to li Element
  newListItem.appendChild(document.createTextNode(`${quantity} ${product}`));
  // Append the li to parent ul Element
  parentList.appendChild(newListItem);

})

<!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="product1" name="product">
    <label for="item">Enter A Quantity</label>
    <input type="number" id="qty1" name="qty">
    <button>Submit</button>
  </form>

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

</html>

【讨论】：