Hello. I’m having issues w/ a Udemy exercise regarding form events. Here are the rules the instructor wants.
Form Events Exercise
Time to get some practice working with forms and form events! index.html already has a form element that contains two elements, one for quantity and one for a product name. index.html also contains an empty
- where you will append new
- 's. Watch the gif at the bottom for an overview of how your code should work. Your task is to follow these steps:
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. Set the text on the new <li> to include the quantity and product name from the form. Append the new `<li>` to the `<ul>` on the pageEdit/update: Also, here is the HTML that is our template. .
<!DOCTYPE html> <head> <title>Grocery List</title> <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'); form.addEventListener('submit', function (e) { console.log(form.elements.username.value) e.preventDefeault() })