Udemy exercise grocery form

Hello. This is from a previous Udemy exercise that I typed up. I actually figured out the basics of a similar exercise and copied the JS over because the HTML (for this exercise) was to be left alone and only used for reference.

Here is the HTML

<!DOCTYPE html>

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


    <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 the code I’ve pulled in from a similar exercise I did. The modifications I’ve made aren’t referenced right, which was the issue in the previous exercise I posted, and fixed.

// Leave the next line, the form must be assigned to a variable named 'form' in order for the exercise test to pass
const form = document.querySelector('form');

const product = document.querySelector('#product')
const quantity = document.querySelector('#qty')
list.addEventListener('submit', function (e) {

    const shopper = itemForm.elements.shopper
    const items = itemForm.elements.items
    addComment(shopper.value, items.value)
    product.value = ""
    list.value = ""

const addItem = (qty, product) => {
const newItem = document.createElement('li')
    newItem.append(`: ${items}`)

I appreciate the help.

The code for the exercise is supposed to look like and act like the following:


I have the basics but I’m grabbing/referencing id’s from the HTML in the wrong way.

  1. Where is the link to the JS in the HTML?

  2. What is itemForm supposed to be?

  3. What is itemFormContainer supposed to be?

  4. Why are the function parameters qty, product not used?

Use the browser console, add logs to your JS and check your variables and values.

I’m sorry, I was overwhelmed.

  1. The JS link is automatically setup by the person who made the udemy course. Colt Steele.

  2. The itemForm was my attempt to add a variable to make things easier.

  3. That was carried over from the idea from #2 from my previous project that was similar to this one. Also, mistake and just trying stuff.

  4. I think I’m using them but not properly. And when I say properly, I mean not in the right places.

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