为什么我的 JS 代码中的 clearForm() 不起作用？

Question

This program takes values of name, price, category and so on and after that the form should be clear but it does not work

function addProduct()
{
        var product =
        {
            name:productNameInput.value,
            price:productPriceInput.value,
            category:productCategoryInput.value,
            desc:productDescriptionInput.value

        }
        productsContainer.push(product);
        localStorage.setItem("Products",JSON.stringify(productsContainer));
        displayProducts();  
        clearForm();
}

 <div class="container py-5">
           <label>Product Name:</label>
           <input type="text" name=" " id="productNameInput" class="my-2 form-control">
           <label>Product Price:</label>
           <input type="number" name=" " id="productPriceInput" class="my-2 form-control">

           <label>Product Category:</label>
           <input type="text" name=" " id="productCategoryInput" class="my-2 form-control">
           <label>Product Description:</label>
           <textarea name=" " id="productDescriptionInput" class="my-2 form-control">   
             </textarea>
             <button id ="addBtn"class="btn btn-info">Add Product</button>
  </div>

Answer 1

You need wrap HTML to form tag <form id="myform">

and add button type="button <button type="button" onclick="addProduct()" ,

Your clearForm should only call reset() function as

function clearForm(){
  document.getElementById("myform").reset();
}

 var productsContainer = []; function addProduct() { var product = { name:productNameInput.value, price:productPriceInput.value, category:productCategoryInput.value, desc:productDescriptionInput.value } productsContainer.push(product); //localStorage.setItem("Products",JSON.stringify(productsContainer)); displayProducts(); clearForm(); } function displayProducts(){ } function clearForm(){ document.getElementById("myform").reset(); }

 <form id="myform"> <div class="container py-5"> <label>Product Name:</label> <input type="text" name=" " id="productNameInput" class="my-2 form-control"> <label>Product Price:</label> <input type="number" name=" " id="productPriceInput" class="my-2 form-control"> <label>Product Category:</label> <input type="text" name=" " id="productCategoryInput" class="my-2 form-control"> <label>Product Description:</label> <textarea name=" " id="productDescriptionInput" class="my-2 form-control"> </textarea> <button type="button" onclick="addProduct()" id ="addBtn"class="btn btn-info">Add Product</button> </div> </form>