Making grocery list

const form = document.querySelector('form');

const formContainer=document.querySelector('#list');
form.addEventListener('submit', function(e){
    e.preventDefault();
    
    const productInput=form.elements.product;
   const qtyInput=form.elements.qty;
   addQty(productInput.value, qtyInput.value);
});

const addQty= function (product, qty){
    const newName=document.createElement('li');
    newName.append(product,qty);
    
    formContainer.append(newName);
};

"solution is incorrect. the grocery list when form is submitted, it should add a new <li> to the <ul>"

how to do it?

Hello,
Please edit your thread. inert the code here .
Use the preformatted text right to the quotation button.

Is this the ul element?

document.querySelector('list');

There is no such thing as a list element so your selector should likely be a class or id. .list or #list, or an element selector ul.

Also, this evpreventDefault(); should be e.preventDefault();


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

thanks! I did as you told, but no chanes in result(

Post your new code so we can see what you have. Also, post the HTML as well.

Example with your code and the changes I suggested
<form action="">
  <input type="text" name="product">
  <input type="text" name="qty">
  <button>Add</button>
</form>

<ul class="list"></ul>
const form = document.querySelector("form");

const formContainer = document.querySelector(".list");
form.addEventListener("submit", function (e) {
  e.preventDefault();

  const productInput = form.elements.product;
  const qtyInput = form.elements.qty;
  addQty(productInput.value, qtyInput.value);
});

const addQty = function (product, qty) {
  const newName = document.createElement("li");
  newName.append(product, qty);

  formContainer.append(newName);
};

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