為什么我的 JS 代碼中的 clearForm() 不起作用？

Question

該程序采用名稱、價格、類別等值，之后表格應該清晰但不起作用

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

您需要包裝 HTML 以形成標簽<form id="myform">

並添加 button type="button <button type="button" onclick="addProduct()" ，

您的 clearForm 應該只調用 reset() function 作為

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>