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>

<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 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) {
    e.preventDefault()

    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}`)
    itemFormContainer.append(newItem)
}

I appreciate the help.

What help do you need?

What does the code not do that you are expecting it to do?

What errors are you seeing in the browser console?

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

2020-09-27_03-18-36-c33bbf5e6a8430c86f0ef9e0b5e8b85a

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.

Currently, you have an event listener on the ul with id=list. Is the list getting submitted or another element? Think carefully and you should realize what to do.

Also, all of the questions @lasjorg asked earlier are relevant to your issue/solution. You reference itemForm and itemFormContainer, but I do not see these elements with the code you posted above.

What exactly are you wanting addItem to do (especially since you have qty and product as parameters but never used them)?