Udemy JS 表单提交练习

Question

I'm working on a Udemy course from an instructor named Colt Steel.我正在从一位名叫 Colt Steel 的讲师那里学习 Udemy 课程。 I'm stuck on creating a form submission.我坚持创建表单提交。 Here are his instructions:以下是他的指示：

Form Events Exercise表单事件练习

Time to get some practice working with forms and form events.是时候练习使用 forms 并形成事件了。 index,html already has a form element that contains two elements. index,html 已经有一个包含两个元素的表单元素。 one for quantity and one for a product name.一个用于数量，一个用于产品名称。 index.html also contains an empty ul where you will append new li's. index.html 还包含一个空的 ul，您将在其中找到 append 个新的 li。

Listen for the form submission监听表单提交

When the form is submitted, prevent the default behavior提交表单时，防止默认行为

Grab the quantity input value and the product input value抓取数量输入值和产品输入值

Create a new li element.创建一个新的 li 元素。 Set the text on the new li to include the quantity and product name from the form.将新 li 上的文本设置为包括表单中的数量和产品名称。

Append the new li to the ul on the page Append 页面上ul的新li

Reset the inputs重置输入

And here is the HTML这是 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>

And here is what I have so far这是我到目前为止所拥有的

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

Answer 1

It is due to referring the wrong attribute name .这是由于引用了错误的属性名称。 As in HTMl the first input box, the argument name is product but in Script, you are referring to userform .与第一个输入框 HTMl 一样，参数名称是product但在脚本中，您指的是userform 。

In order to create/add a new item List to parent ul, You'll have to create a new Element and append the new Child to parent Element.为了创建/添加一个新的项目列表到父元素，你必须创建一个新的元素和 append 新的子元素到父元素。

 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>

Udemy JS 表单提交练习

问题描述

1 个解决方案

解决方案1
0 2023-01-28 12:40:17

Udemy JS 表单提交练习

问题描述

1 个解决方案

解决方案1 0 2023-01-28 12:40:17

解决方案1
0 2023-01-28 12:40:17