Help in function of adding items of a form to existing products

Hello everyone hope you’re doing well, i am trying to make a page for sellers to add their products which they want to sell.
I created a form and I am trying to write the correct function to add the info from the form to the page, but errors keep showing.
this is the function i am trying to accomplish:

// this function makes the seller add the products
document.getElementById("submit").addEventListener("click", function(event){
   event.preventDefault();
   
   let productName=document.getElementById("name").value.trim();
   let productDetail=document.getElementById("detail").value.trim();
   let productPrice =document.getElementById("number").value.trim();
   let  ImageUrl= document.getElementById("image-url").value.trim();
   if(productName === ""){
       alert("Please Enter the name of the product");
   }
   else if( productDetail === ""){
       alert("Please Enter the details  of the product");
   }
   else if(productPrice === ""){
       alert("Please Enter the price of the product");
   }
   else if(ImageUrl === ""){
       alert("Please Enter the Image of the product");
   }
   else {
      console.log(products)
       products.push( {name: productName, detail: productDetail, image:ImageUrl  });
       document.getElementById("name").value=""; 
       document.getElementById("detail").value="";
       document.getElementById("number").value="";
       document.getElementById("image-url").value= "";
       createCart(); 
   }
});

In the code pen the pictures are not showing but this is how it should look like , and also a lot of css comments are not added.

https://codepen.io/bashaerhaddad/pen/bGeMjWm

You are trying to set the image url with a “URL” property on the product object (line 18):

productImage.src = product.URL;

But you define your product object with “image” as the property (line 80):

image:ImageUrl
1 Like