Forms Events Exercise

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 page

    Edit/update: Also, here is the HTML that is our template. .

    <!DOCTYPE html>
        <title>Grocery List</title>
        <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
        <script src=""></script>
        <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">
        <ul id="list"></ul>

    And here is what I have so far:

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

First you’ll have to store the input values in some variables through the onchange callback function then use those values.
Can I ask who is this course taught by?

Typo here.

Not sure why you are referencing .elements.username.value

What are you trying to reference here?

First, thanks for the detailed advice. The course is from a very good bootcamp teacher named Colt Steele. Very detailed but not overwhelming.

Nice! I’m currently taking his(his and Stephen Grider’s) modern Js bootcamp course

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.