时间戳

首页 > 解决方案 > 为什么我的 JS 代码中的 clearForm() 不起作用？

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

问题描述

该程序采用名称、价格、类别等值，之后表格应该清晰但不起作用

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>

标签： javascript

解决方案

您需要包装 HTML 以形成标签 <form id="myform">

并添加按钮type="button <button type="button" onclick="addProduct()"，

您的 clearForm 应该只调用 reset() 函数

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>

推荐阅读